fix: some responsiveness changes and export file names

components/cards/required-grades.tsx

@@ -221,23 +221,24 @@ export function RequiredGrades({
           If you know the weight of the next exam, you can apply that weight to
           the required grades.
         </CardDescription>
-        <div className="flex flex-row gap-3">
+        <div className="flex flex-row gap-3 max-w-full">
           <Input
             value={simulatedWeight || ""}
             type="number"
             onChange={(e) => {
               setSimulatedWeight(Number(e.target.value));
             }}
             placeholder="Simulated weight"
-            className="w-[250px]"
+            className=" flex-shrink-1"
           />
           <Button
             variant="outline"
+            className="flex-shrink-0"
             onClick={() => {
               setSimulatedWeight(undefined);
             }}
           >
-            Clear
+            Reset
           </Button>
         </div>
         {!getSimulatedWeight().valid && (

components/header.tsx

@@ -69,7 +69,7 @@ export default function HeaderComponent() {
         </h1>
         <h1
           className={
-            "inline-block sm:hidden text-3xl font-bold text-foreground whitespace-nowrap select-none"
+            "hidden xs:inline-block  sm:hidden text-3xl font-bold text-foreground whitespace-nowrap select-none"
           }
         >
           Grades

components/import-export-button.tsx

@@ -102,7 +102,8 @@ export function ImportExportButton() {
                       await prepareDataForExport(
                         categoryState.category?.name ?? "",
                         categoryState.category?.id
-                      )
+                      ),
+                      categoryState.category?.name
                     )
                   }
                 >

components/new-semester-button.tsx

@@ -61,7 +61,7 @@ export const NewSemesterButton = () => {
         categoryState.category?.name ?? "",
         categoryState.category?.id
       );
-      if (exportData) exportToJSONFile(data);
+      if (exportData) exportToJSONFile(data, categoryState.category?.name);
       if (!keepSubjects) await clearUserSubjectsGrades();
       if (!keepGrades && keepSubjects) await clearUserGrades();
     } finally {

lib/services/notAsyncLogic.ts

@@ -55,14 +55,15 @@ export function exportToJSONFile(
 ) {
   const json = JSON.stringify(data);
   const timestamp = new Date();
-  const readableTimestamp = `${timestamp.getDate()}-${timestamp.getMonth()}-${timestamp.getFullYear()}-${secondsSinceMidnight()}`;
+  const readableTimestamp = `${timestamp.getDate()}-${timestamp.getMonth()}-${timestamp.getFullYear()}_${secondsSinceMidnight()}`;
   const blob = new Blob([json], { type: "application/json" });
   const url = URL.createObjectURL(blob);
   const a = document.createElement("a");
   a.href = url;
-  a.download = filename
-    ? `${filename}.json`
-    : `grades-${readableTimestamp}.json`;
+  a.download =
+    filename && filename !== "Default"
+      ? `${filename}_${readableTimestamp}.json`
+      : `grades_${readableTimestamp}.json`;
   a.click();
 }
 

tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 
-const plugin = require('tailwindcss/plugin')
+const plugin = require("tailwindcss/plugin");
 
 module.exports = {
   darkMode: ["class"],
@@ -55,6 +55,9 @@ module.exports = {
           foreground: "hsl(var(--card-foreground))",
         },
       },
+      screens: {
+        xs: "380px",
+      },
       borderRadius: {
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",
@@ -90,4 +93,4 @@ module.exports = {
     }),
     require("tailwindcss-animate"),
   ],
-};
+};