refactor: added typing for props, fixed overflow

src/lib/components/CompulsoryTags.svelte

@@ -33,7 +33,7 @@
         background-color: #eaffeb;
         color: #2e4653;
         cursor: pointer;
-        padding: 0.2rem 0.6rem;
+        padding: 0.2rem 0.2rem;
     }
     .compulsoryTagYellow {
         display: flex;
@@ -45,7 +45,7 @@
         background-color: #ffffd4;
         color: #534b2e;
         cursor: pointer;
-        padding: 0.2rem 0.6rem;
+        padding: 0.2rem 0.2rem;
     }
     .compulsoryTagRed {
         display: flex;
@@ -57,6 +57,6 @@
         background-color: #ffcece;
         color: #532e2e;
         cursor: pointer;
-        padding: 0.2rem 0.6rem;
+        padding: 0.2rem 0.2rem;
     }
 </style>

src/lib/components/Report.svelte

@@ -3,8 +3,16 @@
     import crossUrl from "$lib/assets/cross.svg";
     import Textarea from "./inputs/Textarea.svelte";
     import type { Table } from "$lib";
+    import type { SupabaseClient } from "@supabase/supabase-js";
+    import type { Database } from "$lib/database.d.ts";
 
-    const { data, studySpaceId, hideFunc } = $props();
+    interface Props {
+        data: { supabase: SupabaseClient<Database> };
+        studySpaceId: string;
+        hideFunc: () => void;
+    }
+
+    const { data, studySpaceId, hideFunc }: Props = $props();
     const { supabase } = $derived(data);
 
     let uploading = $state(false);

src/lib/components/SpaceCard.svelte

@@ -78,7 +78,7 @@
     .compulsoryContainer {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
-        gap: 0.5rem;
-        font-size: 0.875rem;
+        gap: 0.4rem;
+        font-size: 0.8rem;
     }
 </style>