Fix: Resource filters in mobile view (#10402)

ohcnetwork · Feb 12, 2025 · 7d7cfd6 · 7d7cfd6
1 parent b097800
commit 7d7cfd6
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/src/components/Resource/ResourceList.tsx b/src/components/Resource/ResourceList.tsx
@@ -158,7 +158,7 @@ export default function ResourceList({ facilityId }: { facilityId: string }) {
                     </div>
                   </PopoverContent>
                 </Popover>
-                <div className="hidden md:flex items-center">
+                <div className="items-center">
                   <Tabs
                     value={outgoing ? "outgoing" : "incoming"}
                     className="w-full"
@@ -193,7 +193,7 @@ export default function ResourceList({ facilityId }: { facilityId: string }) {
                 </div>
               </div>
 
-              <div className="hidden md:flex items-center">
+              <div className="items-center">
                 <Tabs
                   value={isActive ? "active" : "completed"}
                   className="w-full"
@@ -228,11 +228,11 @@ export default function ResourceList({ facilityId }: { facilityId: string }) {
               </div>
             </div>
 
-            <Separator className="hidden md:block" />
+            <Separator />
 
-            <div className="hidden md:block p-4">
+            <div className="p-4 h-auto overflow-hidden">
               <Tabs value={currentStatus} className="w-full">
-                <TabsList className="bg-transparent p-0 h-8">
+                <TabsList className="bg-transparent p-0 h-auto flex-wrap justify-start gap-y-2 overflow-auto">
                   {currentStatuses.map((statusOption) => (
                     <TabsTrigger
                       key={statusOption}