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

app/src/pages/grades/GradesPage.tsx

@@ -74,7 +74,7 @@ export function GradesPage() {
   const semesters = [...(s?.semesters ?? [])].sort((a, b) => b.term.localeCompare(a.term));
 
   return (
-    <div className="mx-auto max-w-[1080px] px-6 py-5">
+    <div className="mx-auto max-w-[1080px] px-3 py-4 sm:px-6 sm:py-5">
       {/* 总览指标 */}
       <div className="mb-4 flex flex-wrap gap-3">
         <MetricCard label="总学分" value={s?.overall.credits ?? 0} />
@@ -297,7 +297,7 @@ function SemesterCard({ sem }: { sem: SemesterGrades }) {
       />
       <CardBody className="p-0">
         <div className="overflow-x-auto">
-          <table className="w-full border-collapse text-[13px]">
+          <div className="-mx-1 overflow-x-auto px-1"><table className="w-full border-collapse text-[13px]">
             <thead>
               <tr>
                 {['课程', '学分', '分数', '等级', '绩点', ''].map(h => (
@@ -335,7 +335,7 @@ function SemesterCard({ sem }: { sem: SemesterGrades }) {
               ))}
               <CourseAddRow sem={sem} />
             </tbody>
-          </table>
+          </table></div>
         </div>
       </CardBody>