Adds more responsive community table (#211)

src/components/ui/tables/CommunityToolsTable.astro

@@ -45,9 +45,9 @@ const processedTools = tools.map((tool) => ({
 ---
 
 <div class="mx-auto max-w-[85rem] px-4 py-8 sm:px-6 sm:py-16 lg:px-8 lg:py-14 2xl:max-w-full">
-  <div class="flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-4 py-4">
+  <div class="flex flex-col lg:flex-row items-center justify-between space-y-3 lg:space-y-0 lg:space-x-4 py-4">
 
-    <div class="relative w-full md:w-1/3">
+    <div class="relative w-full md:w-3/6 lg:w-1/3">
       <label for="community-tools-table-search" class="sr-only">Search</label>
       <input type="text"
              name="community-tools-table-search"
@@ -65,12 +65,12 @@ const processedTools = tools.map((tool) => ({
       </div>
     </div>
 
-    <div class="w-full md:w-auto flex flex-col md:flex-row space-y-2 md:space-y-0 items-stretch md:items-center justify-end md:space-x-3 flex-shrink-0">
-      <div class="flex items-center space-x-3 w-full md:w-auto">
+    <div class="w-full lg:w-auto flex flex-col lg:flex-row space-y-2 lg:space-y-0 items-stretch lg:items-center justify-end lg:space-x-3 flex-shrink-0">
+      <div class="flex flex-wrap gap-y-2 gap-x-3 justify-between items-center w-full md:w-auto">
         {tags.length > 0 && <TableSelectFilter selectId="community-tools-table-filter-tags" placeholder="Filter by tags..." options={tags} />}
         {licenses.length > 0 && <TableSelectFilter selectId="community-tools-table-filter-licenses" placeholder="Filter by license..." options={licenses} />}
         {creatorNames.length > 0 && <TableSelectFilter selectId="community-tools-table-filter-creatorNames" placeholder="Filter by creator..." options={creatorNames} />}
-        <button type="button" id="community-tools-table-clearBtn" class="py-2 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg border border-gray-200 bg-white text-gray-400 hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:text-neutral-500 dark:border-neutral-700 dark:hover:bg-neutral-800">
+        <button type="button" id="community-tools-table-clearBtn" class="py-2 px-2 inline-flex items-center max-w-20 gap-x-1 text-sm rounded-lg border border-gray-200 bg-white text-gray-400 hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:text-neutral-500 dark:border-neutral-700 dark:hover:bg-neutral-800">
           <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d="M18 6 6 18"></path>
             <path d="m6 6 12 12"></path>
@@ -83,7 +83,7 @@ const processedTools = tools.map((tool) => ({
   </div>
   <div id="community-tools-table-wrapper"
        data-community-tools={JSON.stringify(processedTools)}
-       class="overflow-hidden border border-gray-200 dark:border-gray-700 md:rounded-lg">
+       class="overflow-x-auto overflow-y-hidden lg:overflow-x-hidden border border-gray-200 dark:border-gray-700 md:rounded-lg">
   </div>
 </div>