fix(ui): tame sidebar collapse, fill avatar button, box problem-sets table

- Drop sidebar height overflow by shrinking nav-item padding so the
  list fits 100vh without inner scroll
- Animate the nav label width/margin so collapse no longer snaps the
  icon row from 44px squares to a wider pill mid-transition
- Force the dashboard avatar img to fill the round button so the
  uploaded pfp shows edge-to-edge instead of leaving white margin
- Restyle the problem-sets table so each set is one bordered card
  matching the dashboard set rows, instead of one box per column

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: 2 people

app/globals.css

@@ -173,7 +173,7 @@ body.has-site-sidebar .site-content {
   top: 0;
   height: 100vh;
   overflow: hidden;
-  padding: 28px 14px;
+  padding: 12px 12px;
   background: var(--color-surface);
   border-right: 1px solid var(--color-border);
   width: var(--sidebar-collapsed-width);
@@ -194,41 +194,35 @@ body.has-site-sidebar .site-content {
 .sidebar:focus-within {
   width: var(--sidebar-width);
   box-shadow: 18px 0 36px -22px rgba(8, 10, 18, 0.28);
-  overflow-y: auto;
 }
 
 .sidebar:hover .nav-label,
 .sidebar:focus-within .nav-label {
   opacity: 1;
   transform: translateX(0);
+  width: auto;
+  margin-left: 10px;
 }
 
 .nav-label {
   display: inline-block;
   white-space: nowrap;
   opacity: 0;
-  transform: translateX(-6px);
+  width: 0;
+  margin-left: 0;
+  overflow: hidden;
+  transform: translateX(-4px);
   transition:
-    opacity 200ms ease 60ms,
-    transform 220ms cubic-bezier(0.22, 1, 0.36, 1) 60ms;
+    opacity 180ms ease,
+    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
+    width 240ms cubic-bezier(0.22, 1, 0.36, 1),
+    margin-left 240ms cubic-bezier(0.22, 1, 0.36, 1);
   pointer-events: none;
 }
 
-.sidebar:not(:hover):not(:focus-within) .nav-item {
-  width: 44px;
-  height: 44px;
-  min-height: 44px;
-  padding: 0;
-  margin: 0 auto;
-  gap: 0;
-  justify-content: center;
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.sidebar:not(:hover):not(:focus-within) .nav-label {
-  width: 0;
-  margin: 0;
+.sidebar:hover .nav-label,
+.sidebar:focus-within .nav-label {
+  pointer-events: auto;
 }
 
 .brand {
@@ -2568,8 +2562,8 @@ html {
 }
 
 .nav-item {
-  min-height: 42px;
-  padding: 0 12px;
+  min-height: 40px;
+  padding: 0 11px;
   border: 1px solid transparent;
   border-radius: 12px;
   color: var(--sidebar-text);
@@ -2872,8 +2866,8 @@ html {
 }
 
 .account-avatar-button .avatar {
-  width: 100%;
-  height: 100%;
+  width: 100% !important;
+  height: 100% !important;
   border-radius: 50%;
   object-fit: cover;
   display: block;
@@ -5290,10 +5284,23 @@ html.dark .theme-choice-button.active {
 
 .problem-hub-table-panel .table-wrap {
   overflow-x: hidden;
+  padding: 12px 14px 14px;
 }
 
 .problem-hub-table-panel table {
   table-layout: fixed;
+  border-collapse: separate;
+  border-spacing: 0 8px;
+}
+
+.problem-hub-table-panel thead th {
+  padding: 0 14px 6px;
+  color: var(--color-muted);
+  font-size: 0.74rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  text-align: left;
 }
 
 .problem-hub-table-panel th,
@@ -5303,28 +5310,43 @@ html.dark .theme-choice-button.active {
 
 .problem-hub-table-panel td {
   padding: 0;
+  background: var(--color-card-bg);
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
+  vertical-align: middle;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease;
+}
+
+.problem-hub-table-panel tr.problem-set-row td:first-child {
+  border-left: 1px solid var(--color-border);
+  border-top-left-radius: var(--radius-card);
+  border-bottom-left-radius: var(--radius-card);
+}
+
+.problem-hub-table-panel tr.problem-set-row td:last-child {
+  border-right: 1px solid var(--color-border);
+  border-top-right-radius: var(--radius-card);
+  border-bottom-right-radius: var(--radius-card);
+}
+
+.problem-hub-table-panel tr.problem-set-row:hover td {
+  background: rgba(240, 93, 155, 0.08);
+  border-color: rgba(240, 93, 155, 0.28);
 }
 
 .problem-set-row-link {
   display: block;
-  padding: 14px 12px;
+  padding: 14px 16px;
   min-height: 100%;
-  border: 1px solid transparent;
-  border-radius: 12px;
+  border-radius: 0;
   color: inherit;
   text-decoration: none;
   box-sizing: border-box;
-  transition:
-    background-color 160ms ease,
-    border-color 160ms ease,
-    color 160ms ease,
-    box-shadow 160ms ease,
-    transform 160ms ease;
 }
 
 .problem-set-row:hover .problem-set-row-link {
-  background: rgba(240, 93, 155, 0.1);
-  border-color: rgba(240, 93, 155, 0.2);
   color: var(--color-text-strong);
 }