From 65e3d8460d47c280f91082b163a04798630d7af8 Mon Sep 17 00:00:00 2001
From: Tudor <tudor@sitaru.org>
Date: Mon, 23 Mar 2026 22:44:39 +0000
Subject: [PATCH] style(row): move RWM score next to name, enlarge buttons,
 show label on mobile

Group school name and score together on the left using a nameScore flex
container, so the percentage sits close to the name rather than pushed to the
far right. Action buttons get slightly more padding on desktop (0.4375rem v
0.3125rem). On mobile the scoreLabel is now visible inline instead of hidden,
so the percentage reads as R,W&M not a bare number.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 nextjs-app/components/SchoolRow.module.css | 78 +++++++++++++---------
 nextjs-app/components/SchoolRow.tsx        | 10 +--
 2 files changed, 54 insertions(+), 34 deletions(-)

diff --git a/nextjs-app/components/SchoolRow.module.css b/nextjs-app/components/SchoolRow.module.css
index 2b880dd..b46f7c5 100644
--- a/nextjs-app/components/SchoolRow.module.css
+++ b/nextjs-app/components/SchoolRow.module.css
@@ -38,16 +38,23 @@
   gap: 0.3rem;
 }
 
-/* Line 1 */
+/* Line 1: name+score on the left, actions pinned right */
 .rowTop {
   display: flex;
   align-items: center;
+  gap: 1rem;
+}
+
+/* Name + score grouped together on the left */
+.nameScore {
+  display: flex;
+  align-items: baseline;
   gap: 0.75rem;
+  flex: 1;
+  min-width: 0;
 }
 
 .schoolName {
-  flex: 1;
-  min-width: 0;
   font-size: 0.9375rem;
   font-weight: 600;
   color: var(--text-primary, #1a1612);
@@ -55,21 +62,21 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  min-width: 0;
+  flex-shrink: 1;
 }
 
 .schoolName:hover {
   color: var(--accent-coral, #e07256);
 }
 
-/* Score block: number + trend + label stacked */
+/* Score block: value + label inline */
 .scoreBlock {
   display: flex;
-  flex-direction: column;
-  align-items: flex-end;
+  align-items: baseline;
+  gap: 0.3rem;
   flex-shrink: 0;
-  gap: 0;
-  min-width: 60px;
-  text-align: right;
+  white-space: nowrap;
 }
 
 .scoreValue {
@@ -80,7 +87,7 @@
   line-height: 1.2;
   display: flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: 0.2rem;
 }
 
 .scoreNA {
@@ -89,7 +96,7 @@
 }
 
 .scoreLabel {
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
   color: var(--text-muted, #8a847a);
   white-space: nowrap;
 }
@@ -113,21 +120,21 @@
   color: var(--text-muted, #8a847a);
 }
 
-/* Action buttons */
+/* Action buttons — pinned right, slightly larger on desktop */
 .rowActions {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: 0.5rem;
   flex-shrink: 0;
 }
 
 .btnView {
-  padding: 0.3125rem 0.625rem;
-  font-size: 0.8125rem;
+  padding: 0.4375rem 0.875rem;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--text-secondary, #5c564d);
   border: 1px solid var(--border-color, #e5dfd5);
-  border-radius: 5px;
+  border-radius: 6px;
   text-decoration: none;
   transition: all 0.15s ease;
   white-space: nowrap;
@@ -140,13 +147,13 @@
 }
 
 .btnCompare {
-  padding: 0.3125rem 0.625rem;
-  font-size: 0.8125rem;
+  padding: 0.4375rem 0.875rem;
+  font-size: 0.875rem;
   font-weight: 600;
   color: white;
   background: var(--accent-coral, #e07256);
   border: none;
-  border-radius: 5px;
+  border-radius: 6px;
   cursor: pointer;
   transition: background 0.15s ease;
   white-space: nowrap;
@@ -157,13 +164,13 @@
 }
 
 .btnRemove {
-  padding: 0.3125rem 0.625rem;
-  font-size: 0.8125rem;
+  padding: 0.4375rem 0.875rem;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--text-secondary, #5c564d);
   background: var(--bg-secondary, #f3ede4);
   border: 1px solid var(--border-color, #e5dfd5);
-  border-radius: 5px;
+  border-radius: 6px;
   cursor: pointer;
   transition: all 0.15s ease;
   white-space: nowrap;
@@ -237,25 +244,36 @@
     gap: 0.5rem;
   }
 
-  .schoolName {
+  /* School name takes full width, score+actions wrap below */
+  .nameScore {
     flex-basis: 100%;
-    white-space: normal;
-    font-size: 0.9375rem;
+    min-width: 0;
   }
 
+  .schoolName {
+    white-space: normal;
+  }
+
+  /* Score block stays inline with label visible */
   .scoreBlock {
-    flex-direction: row;
-    align-items: center;
-    gap: 0.375rem;
-    flex-basis: auto;
+    align-items: baseline;
   }
 
   .scoreLabel {
-    display: none;
+    font-size: 0.7rem;
   }
 
+  /* Actions move to end of the wrapped row */
   .rowActions {
     margin-left: auto;
+    gap: 0.375rem;
+  }
+
+  .btnView,
+  .btnCompare,
+  .btnRemove {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.8125rem;
   }
 
   .rowProgress {
diff --git a/nextjs-app/components/SchoolRow.tsx b/nextjs-app/components/SchoolRow.tsx
index 64923d9..d5e25f1 100644
--- a/nextjs-app/components/SchoolRow.tsx
+++ b/nextjs-app/components/SchoolRow.tsx
@@ -41,11 +41,12 @@ export function SchoolRow({
   return (
     <div className={`${styles.row} ${isInCompare ? styles.rowInCompare : ''}`}>
       <div className={styles.rowMain}>
-        {/* Line 1: Name + score + actions */}
+        {/* Line 1: Name + score on left, actions pinned right */}
         <div className={styles.rowTop}>
-          <a href={`/school/${school.urn}`} className={styles.schoolName}>
-            {school.school_name}
-          </a>
+          <div className={styles.nameScore}>
+            <a href={`/school/${school.urn}`} className={styles.schoolName}>
+              {school.school_name}
+            </a>
 
           <div className={styles.scoreBlock}>
             {school.rwm_expected_pct != null ? (
@@ -81,6 +82,7 @@ export function SchoolRow({
             )}
             <span className={styles.scoreLabel}>R, W &amp; M</span>
           </div>
+          </div>
 
           <div className={styles.rowActions}>
             <a href={`/school/${school.urn}`} className={styles.btnView}>