styling

classroomio · Dec 4, 2024 · e206eb6 · e206eb6
1 parent 1d40166
commit e206eb6
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 39 deletions.
diff --git a/src/lib/components/navigation/navigation.svelte b/src/lib/components/navigation/navigation.svelte
@@ -115,16 +115,14 @@
       <span class="sr-only" data-svelte-h="svelte-1t6m3jq">Toggle Menu</span
       ></button
     >
-    <div
-      class="flex flex-1 items-center justify-between space-x-2 md:justify-end"
-    >
+    <div class="flex flex-1 items-center space-x-2 justify-end">
       <nav class="flex items-center">
         <Button
           variant="link"
           href="https://www.madeinnigeria.dev"
           target="_blank"
           rel="noreferrer noopener"
-          class="flex items-center gap-0"
+          class="hidden md:flex items-center gap-0"
         >
           Made in Nigeria
 
@@ -135,7 +133,7 @@
           href="https://www.classroomio.com"
           target="_blank"
           rel="noreferrer noopener"
-          class="flex items-center gap-0"
+          class="hidden md:flex items-center gap-0"
         >
           ClassroomIO
 

diff --git a/src/lib/pages/home/table.svelte b/src/lib/pages/home/table.svelte
@@ -246,45 +246,47 @@
       </Table.Body>
     </Table.Root>
   </div>
-  <div class="flex items-center justify-end space-x-2 py-4">
+  <div class="flex flex-col md:flex-row items-center space-x-2 py-4">
     <div class="text-muted-foreground flex-1 text-sm">
       {$rows.length} repo(s) | Page {apiMetadata.pagination.currentPage} of
       {apiMetadata.pagination.totalPages}
     </div>
 
-    <Button
-      variant="outline"
-      size="sm"
-      on:click={onFirstPage}
-      disabled={apiMetadata.pagination.currentPage === 1 || isFetching}
-    >
-      First page
-    </Button>
+    <div class="flex flex-row items-center justify-end space-x-2 py-4">
+      <Button
+        variant="outline"
+        size="sm"
+        on:click={onFirstPage}
+        disabled={apiMetadata.pagination.currentPage === 1 || isFetching}
+      >
+        First page
+      </Button>
 
-    <Button
-      variant="outline"
-      size="sm"
-      on:click={previousPage}
-      disabled={!apiMetadata.pagination.hasPrevPage || isFetching}
-    >
-      <ArrowLeft />
-    </Button>
-    <Button
-      variant="outline"
-      size="sm"
-      on:click={nextPage}
-      disabled={!apiMetadata.pagination.hasNextPage || isFetching}
-    >
-      <ArrowRight />
-    </Button>
-    <Button
-      variant="outline"
-      size="sm"
-      on:click={onLastPage}
-      disabled={apiMetadata.pagination.currentPage ===
-        apiMetadata.pagination.totalPages || isFetching}
-    >
-      Last page
-    </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        on:click={previousPage}
+        disabled={!apiMetadata.pagination.hasPrevPage || isFetching}
+      >
+        <ArrowLeft />
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        on:click={nextPage}
+        disabled={!apiMetadata.pagination.hasNextPage || isFetching}
+      >
+        <ArrowRight />
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        on:click={onLastPage}
+        disabled={apiMetadata.pagination.currentPage ===
+          apiMetadata.pagination.totalPages || isFetching}
+      >
+        Last page
+      </Button>
+    </div>
   </div>
 </div>
diff --git a/src/style.css b/src/style.css
@@ -87,6 +87,12 @@
   padding-right: 2rem;
   padding-left: 2rem;
 }
+@media (max-width: 640px) {
+  .container {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+}
 
 .pre code {
   white-space: pre-wrap;