ui: mobile-first records card list, responsive filters/paddings across pages, grades table scroll guard

app/src/pages/timeline/TimelinePage.tsx

@@ -44,7 +44,7 @@ export function TimelinePage() {
   };
 
   return (
-    <div className="mx-auto max-w-[880px] px-6 py-5">
+    <div className="mx-auto max-w-[880px] px-3 py-4 sm:px-6 sm:py-5">
       <div className="mb-4 flex flex-wrap items-center gap-2">
         <Input
           className="w-[220px]"
@@ -90,7 +90,7 @@ export function TimelinePage() {
           <div className="absolute bottom-0 left-[7px] top-0 w-px bg-line" aria-hidden />
           {tlQ.data.groups.map(group => (
             <section key={group.year} className="mb-2">
-              <div className="sticky top-0 z-10 -mx-6 flex items-center gap-2 bg-bg/90 px-6 py-2 backdrop-blur">
+              <div className="sticky top-0 z-10 -mx-3 flex items-center gap-2 bg-bg/90 px-3 py-2 backdrop-blur sm:-mx-6 sm:px-6">
                 <span className="num text-[16px] font-semibold text-ink-1">{group.year}</span>
                 <span className="text-[12px] text-ink-3">{group.count} 条记录</span>
               </div>