fix: mobile article filters

2077-Collective · Aug 21, 2024 · b4c5935 · b4c5935
1 parent 0bc2aef
commit b4c5935
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/research/src/components/SideMenu.svelte b/research/src/components/SideMenu.svelte
@@ -43,17 +43,25 @@
     </div>
 </div>
 
-<div class="flex gap-2 block lg:hidden mb-8">
+<div class="flex flex-wrap gap-2 block lg:hidden mb-8">
     <button
-        class="mr-2 font-bold flex items-center gap-0.5 text-sm bg-[#1B1B1B] text-gray-100 w-fit px-2 py-1.5 rounded-md hover:text-green hover:bg-black"
+        class="
+            mr-2 font-bold flex items-center gap-0.5 text-sm bg-[#1B1B1B]
+            text-gray-100 min-w-fit px-2 py-1.5 rounded-md hover:text-green
+            hover:bg-black
+        "
         class:text-green={$categories.length === 0}
         on:click={() => clearCategories()}
     >
         All
     </button>
     {#each availableCategories as category}
         <button
-            class="mr-2 font-bold flex items-center gap-0.5 text-sm bg-[#1B1B1B] text-gray-100 w-fit px-2 py-1.5 rounded-md hover:text-green hover:bg-black"
+            class="
+                mr-2 font-bold flex items-center gap-0.5 text-sm bg-[#1B1B1B]
+                text-gray-100 min-w-fit px-2 py-1.5 rounded-md hover:text-green
+                hover:bg-black
+            "
             class:text-green={$categories.includes(category)}
             on:click={() => toggleCategory(category)}
         >

diff --git a/research/src/pages/index.astro b/research/src/pages/index.astro
@@ -20,7 +20,7 @@ try {
 >
     <main class="max-w-screen-3xl m-auto mb-24">
         <section class="pt-8 px-6 lg:px-32">
-            <div class="mb-16">
+            <div class="mb-8 lg:mb-16">
                 <h1 class="text-4xl uppercase mb-4">Research</h1>
                 <p class="text-xl font-bold">
                     Deep dives and technical analyses on Ethereum,