Improve mobile design

Author: w3bdesign

src/components/Product/ProductFilters.component.tsx

@@ -79,7 +79,7 @@ const ProductFilters = ({
 
   return (
     <div className="w-full md:w-64 flex-shrink-0">
-      <div className="bg-white p-6 rounded-lg shadow-sm">
+      <div className="bg-white p-8 sm:p-6 rounded-lg shadow-sm">
         <div className="mb-8">
           <h3 className="font-semibold mb-4">PRODUKT TYPE</h3>
           <div className="space-y-2">

src/components/Product/ProductList.component.tsx

@@ -43,17 +43,17 @@ const ProductList = ({ products, title }: ProductListProps) => {
 
       {/* Main Content */}
       <div className="flex-1">
-        <div className="flex justify-between items-center mb-8">
-          <h1 className="text-2xl font-medium">
+        <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-8">
+          <h1 className="text-xl sm:text-2xl font-medium text-center sm:text-left">
             {title} <span className="text-gray-500">({filteredProducts.length})</span>
           </h1>
 
-          <div className="flex items-center gap-4">
-            <label className="text-sm">Vis produkter:</label>
+          <div className="flex flex-wrap items-center justify-center sm:justify-end gap-2 sm:gap-4">
+            <label className="text-sm font-medium">Sortering:</label>
             <select
               value={sortBy}
               onChange={(e) => setSortBy(e.target.value)}
-              className="border rounded-md px-3 py-1"
+              className="min-w-[140px] border rounded-md px-3 py-1.5 text-sm"
             >
               <option value="popular">Populær</option>
               <option value="price-low">Pris: Lav til Høy</option>