refactor: improve layout and styling in cutting forms for better user experience and responsiveness

This commit is contained in:
Yoga Pangestu 2026-07-07 10:03:42 +07:00
parent d2ddc5e6b7
commit da4467b500
5 changed files with 5 additions and 5 deletions

View File

@ -31,7 +31,7 @@ const page = usePage();
<UserNav />
</div>
</header>
<div class="flex min-w-0 flex-1 flex-col gap-4 overflow-y-auto p-4 pb-24 lg:pb-4">
<div class="flex min-w-0 flex-1 flex-col gap-4 overflow-y-auto overflow-x-hidden p-4 pb-24 lg:pb-4">
<slot />
</div>
</SidebarInset>

View File

@ -265,7 +265,7 @@ function onProductCreated(product: CuttingProductCatalogItem) {
<template>
<div class="grid min-w-0 gap-4 xl:grid-cols-[1fr_400px]">
<div class="space-y-4">
<div class="min-w-0 space-y-4">
<CuttingPosMaterialCatalogPanel v-model:material-search="materialSearch"
:filtered-raw-materials="filteredRawMaterials" :raw-material-catalog="rawMaterialCatalogState"
:material-cart="materialCart" :get-material-cart-item="getMaterialCartItem" :units="units"

View File

@ -77,7 +77,7 @@ function openCombination(rawMaterial: CuttingRawMaterialCatalogItem, price: Cutt
</Empty>
</div>
<div v-else class="columns-1 gap-4 sm:columns-2 xl:columns-3">
<div v-else class="grid grid-cols-1 gap-4 md:grid-cols-2">
<template v-for="rawMaterial in filteredRawMaterials" :key="rawMaterial.id">
<PosCatalogCard v-if="rawMaterial.prices.length > 0"
:title="rawMaterial.name" :cover-image="getFirstCoverImage(rawMaterial.prices)">

View File

@ -98,7 +98,7 @@ function setCombinationResult(combinationId: number | undefined, value: string)
Belum ada bahan baku dipilih.
</div>
<div v-else class="scrollbar-thin max-h-80 space-y-3 overflow-y-auto overscroll-y-contain">
<div v-else class="scrollbar-thin max-h-80 space-y-3 overflow-y-auto overflow-x-hidden overscroll-y-contain">
<template v-for="group in materialGroups" :key="group.combinationId ?? `single-${group.items[0]?.index}`">
<div v-if="group.type === 'combination'"
class="rounded-lg border-2 border-dashed border-primary/30 p-3">

View File

@ -41,7 +41,7 @@ const emit = defineEmits<{
Belum ada produk hasil dipilih.
</div>
<div v-else class="scrollbar-thin max-h-80 space-y-3 overflow-y-auto overscroll-y-contain">
<div v-else class="scrollbar-thin max-h-80 space-y-3 overflow-y-auto overflow-x-hidden overscroll-y-contain">
<div v-for="(item, index) in resultCart" :key="item.product_variant_id" class="rounded-lg border p-3">
<div class="mb-2 flex items-start justify-between gap-2">
<div class="min-w-0 flex-1">