From 7f4b41b90420bcf0196785cbc61378c1e6224fb4 Mon Sep 17 00:00:00 2001
From: dhilanradya <akundhilan@gmail.com>
Date: Mon, 8 Sep 2025 17:16:05 +0700
Subject: [PATCH] [fix] ui mobile produk

---
 resources/js/components/searchbar.vue |  2 +-
 resources/js/pages/Produk.vue         | 90 ++++++++++++++++++++-------
 2 files changed, 70 insertions(+), 22 deletions(-)

diff --git a/resources/js/components/searchbar.vue b/resources/js/components/searchbar.vue
index 6c66972..236637d 100644
--- a/resources/js/components/searchbar.vue
+++ b/resources/js/components/searchbar.vue
@@ -14,4 +14,4 @@ import { ref } from "vue";
 
 const searchText = ref("");
 defineEmits(["update:search"]);
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/js/pages/Produk.vue b/resources/js/pages/Produk.vue
index ddaae0a..e66bcf5 100644
--- a/resources/js/pages/Produk.vue
+++ b/resources/js/pages/Produk.vue
@@ -20,29 +20,65 @@
             <!-- Judul -->
             <p class="font-serif italic text-[25px] text-D">PRODUK</p>
 
-            <!-- Filter -->
-            <div
-                class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3"
-            >
-                <!-- Dropdown Kategori -->
-                <InputSelect
-                    v-model="selectedCategory"
-                    :options="kategori"
-                    class="w-full md:w-48"
-                />
+            <!-- Wrapper -->
+            <div class="mt-3">
+                <!-- Mobile Layout -->
+                <div class="flex flex-col gap-3 sm:hidden">
+                    <!-- Search -->
+                    <div class="w-full">
+                        <searchbar
+                            v-model:search="searchQuery"
+                            class="searchbar-mobile"
+                        />
+                    </div>
 
-                <!-- Search -->
-                <searchbar v-model:search="searchQuery" class="flex-1" />
-            </div>
+                    <!-- Filter + Tombol -->
+                    <div class="flex flex-row justify-between items-center">
+                        <!-- Filter Kategori -->
+                        <div class="w-40 shrink-0">
+                            <InputSelect
+                                v-model="selectedCategory"
+                                :options="kategori"
+                                class="w-full"
+                            />
+                        </div>
 
-            <!-- Tombol Tambah Produk -->
-            <div class="mt-3 flex justify-end">
-                <router-link
-                    to="/produk/baru"
-                    class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
-                >
-                    Tambah Produk
-                </router-link>
+                        <!-- Tombol Tambah Produk -->
+                        <router-link
+                            to="/produk/baru"
+                            class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
+                        >
+                            Tambah Produk
+                        </router-link>
+                    </div>
+                </div>
+
+                <!-- Desktop Layout -->
+                <div class="hidden sm:flex flex-row gap-3 items-start">
+                    <!-- Filter -->
+                    <div class="w-40 sm:w-48 shrink-0">
+                        <InputSelect
+                            v-model="selectedCategory"
+                            :options="kategori"
+                            class="w-full"
+                        />
+                    </div>
+
+                    <!-- Search -->
+                    <div class="flex-1 mt-[2px]">
+                        <searchbar v-model:search="searchQuery" class="w-full" />
+                    </div>
+                </div>
+
+                <!-- Tombol Tambah Produk (desktop) -->
+                <div class="hidden sm:flex justify-end mt-3">
+                    <router-link
+                        to="/produk/baru"
+                        class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
+                    >
+                        Tambah Produk
+                    </router-link>
+                </div>
             </div>
 
             <!-- Grid Produk -->
@@ -296,3 +332,15 @@ async function deleteProduk() {
     }
 }
 </script>
+
+<style scoped>
+/* 🔥 Tambahan agar searchbar mobile full */
+.searchbar-mobile:deep(div) {
+  width: 100% !important;
+  justify-content: flex-start !important;
+}
+
+.searchbar-mobile:deep(input) {
+  width: 100% !important;
+}
+</style>