dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance layout responsiveness by adding min-w-0 and overflow-x-auto classes
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (8.3) (push) Has been cancelled
Details
tests / ci (8.4) (push) Has been cancelled
Details
tests / ci (8.5) (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Yoga Pangestu 2026-07-31 16:34:13 +07:00
parent 27f101e830
commit 014682ab56
9 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/js/pages/admin/manage/cuttings/Share.vue
View File

@ -132,7 +132,7 @@ const groupedMaterials = computed<GroupedMaterials[]>(() => {
<!-- Results Section -->
<div v-if="cutting.results.length" class="border-b p-6">
<h3 class="mb-3 text-sm font-semibold">Hasil Produk</h3>
<div class="overflow-hidden rounded-md border">
<div class="overflow-x-auto rounded-md border">
<Table>
<TableHeader>
<TableRow>
@ -181,7 +181,7 @@ const groupedMaterials = computed<GroupedMaterials[]>(() => {
<!-- Materials Section -->
<div v-if="cutting.materials.length" class="border-b p-6">
<h3 class="mb-3 text-sm font-semibold">Bahan Baku</h3>
<div class="overflow-hidden rounded-md border">
<div class="overflow-x-auto rounded-md border">
<Table>
<TableHeader>
<TableRow>

2
resources/js/pages/admin/manage/cuttings/form/CuttingPosCartDetailDialog.vue
View File

@ -34,7 +34,7 @@ const open = defineModel<boolean>('open', { required: true });
<template>
<Dialog v-model:open="open">
<DialogContent class="sm:max-w-lg min-w-0 max-h-[90dvh] flex flex-col">
<DialogContent class="min-w-0 sm:max-w-lg max-h-[90dvh] flex flex-col">
<DialogHeader>
<DialogTitle>Detail Keranjang</DialogTitle>
</DialogHeader>

14
resources/js/pages/admin/manage/cuttings/form/CuttingPosCombinationDialog.vue
View File

@ -206,18 +206,18 @@ watch(open, (value) => {
<template>
<Dialog v-model:open="open">
<DialogContent class="flex max-h-[90vh] flex-col sm:max-w-4xl">
<DialogContent class="flex max-h-[90vh] min-w-0 flex-col sm:max-w-4xl">
<DialogHeader>
<DialogTitle>Kombinasi Bahan Baku</DialogTitle>
</DialogHeader>
<div class="scrollbar-thin flex-1 overflow-y-auto pr-1">
<div class="scrollbar-thin flex-1 overflow-y-auto overscroll-y-contain pr-1">
<div class="space-y-4">
<div v-if="selectedMaterials.length > 0" class="rounded-lg border p-3 space-y-2">
<div v-if="selectedMaterials.length > 0" class="min-w-0 rounded-lg border p-3 space-y-2">
<p class="text-sm font-medium">Bahan Baku Terpilih ({{ selectedMaterials.length }})</p>
<div class="space-y-2">
<div v-for="item in selectedMaterials" :key="item.raw_material_price_id"
class="flex flex-col gap-2 rounded-md border p-2 sm:flex-row sm:items-center"
class="flex min-w-0 flex-col gap-2 rounded-md border p-2 sm:flex-row sm:items-center"
:class="item.is_initial ? 'border-primary bg-primary/5' : ''">
<div class="flex items-center gap-2 flex-1 min-w-0">
<PosCatalogVariantThumb :items="item.images" :title="`${item.raw_material_name} - ${item.variant}`" />
@ -275,7 +275,7 @@ watch(open, (value) => {
<div v-else class="space-y-3">
<div v-for="rawMaterial in filteredRawMaterials" :key="rawMaterial.id"
class="rounded-lg border p-3">
class="min-w-0 rounded-lg border p-3">
<div class="mb-2 flex items-center gap-2">
<p class="text-sm font-medium">{{ rawMaterial.name }}</p>
<Badge variant="outline" class="text-xs">
@ -285,7 +285,7 @@ watch(open, (value) => {
<div class="space-y-1">
<div v-for="price in rawMaterial.prices" :key="price.id"
class="flex items-center gap-2.5 rounded-md px-2 py-1.5 transition-all duration-200"
class="flex min-w-0 items-center gap-2.5 rounded-md px-2 py-1.5 transition-all duration-200"
:class="[
isSelected(price.id) ? 'border-2 border-primary bg-primary/5' : 'cursor-pointer hover:bg-muted/30',
]" @click="!isSelected(price.id) && toggleVariant(rawMaterial, price)">
@ -310,7 +310,7 @@ watch(open, (value) => {
</div>
</div>
<div class="flex flex-col gap-3 border-t pt-4 sm:flex-row sm:items-center sm:justify-between">
<div class="flex min-w-0 flex-col gap-3 border-t pt-4 sm:flex-row sm:items-center sm:justify-between">
<div class="flex flex-wrap items-center gap-3">
<div class="flex items-center gap-2">
<Label class="text-sm whitespace-nowrap">Hasil:</Label>

2
resources/js/pages/admin/manage/cuttings/form/CuttingPosForm.vue
View File

@ -285,7 +285,7 @@ function onCombinationCreated(items: CuttingMaterialCartItem[]) {
</script>
<template>
<div class="grid min-w-0 gap-4 xl:grid-cols-[1fr_400px]">
<div class="grid min-w-0 gap-4 overflow-hidden xl:grid-cols-[1fr_400px]">
<div class="min-w-0 space-y-4 order-last xl:order-first">
<CuttingPosMaterialCatalogPanel v-model:material-search="materialSearch"
v-model:selected-raw-material-id="selectedRawMaterialId"

4
resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialCatalogPanel.vue
View File

@ -102,11 +102,11 @@ function openCombination(rawMaterial: CuttingRawMaterialCatalogItem, price: Cutt
</script>
<template>
<Card class="min-w-0">
<Card class="min-w-0 overflow-hidden">
<CardHeader class="flex flex-row items-center justify-between pb-3 space-y-0">
<CardTitle class="text-base">Pilih Bahan Baku</CardTitle>
</CardHeader>
<CardContent>
<CardContent class="min-w-0">
<div class="space-y-4">
<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
<div class="relative flex-1">

12
resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialSummaryItems.vue
View File

@ -98,10 +98,10 @@ 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 overflow-x-hidden overscroll-y-contain">
<div v-else class="scrollbar-thin max-h-80 min-w-0 space-y-3 overflow-y-auto 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">
class="min-w-0 rounded-lg border-2 border-dashed border-primary/30 p-3">
<div class="mb-2 flex items-center justify-between">
<div class="flex items-center gap-2">
<Layers class="size-4 text-primary" />
@ -128,9 +128,9 @@ function setCombinationResult(combinationId: number | undefined, value: string)
</div>
</div>
<div class="space-y-2">
<div class="min-w-0 space-y-2">
<div v-for="{ item, index } in group.items" :key="item.raw_material_price_id"
class="rounded-md border bg-background p-2.5">
class="min-w-0 rounded-md border bg-background p-2.5">
<div class="mb-1.5 flex items-start justify-between gap-2">
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
@ -173,7 +173,7 @@ function setCombinationResult(combinationId: number | undefined, value: string)
</div>
<div v-else v-for="{ item, index } in group.items" :key="item.raw_material_price_id"
class="rounded-lg border p-3">
class="min-w-0 rounded-lg border p-3">
<div class="mb-2 flex items-start justify-between gap-2">
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
@ -200,7 +200,7 @@ function setCombinationResult(combinationId: number | undefined, value: string)
</Button>
</div>
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
<div class="grid min-w-0 grid-cols-1 gap-2 sm:grid-cols-2">
<Field
:data-invalid="formErrors(form, `materials.${index}.material_usage`).length > 0 ? 'true' : undefined">
<FieldLabel class="text-xs">

4
resources/js/pages/admin/manage/cuttings/form/CuttingPosResultSummaryItems.vue
View File

@ -30,13 +30,13 @@ defineProps<{
Belum ada produk hasil.
</div>
<div v-for="(item, index) in resultCart" :key="index" class="rounded-lg border p-3">
<div v-for="(item, index) in resultCart" :key="index" class="min-w-0 rounded-lg border p-3">
<Field>
<FieldLabel class="text-xs">Nama Produk</FieldLabel>
<Input v-model="item.product_name" type="text" placeholder="Masukkan nama produk" />
</Field>
<div class="grid grid-cols-1 gap-2 mt-2 sm:grid-cols-3">
<div class="grid min-w-0 grid-cols-1 gap-2 mt-2 sm:grid-cols-3">
<Field>
<FieldLabel class="text-xs">Sample</FieldLabel>
<NumberInput v-model="item.sample" class="h-8" />

4
resources/js/pages/admin/manage/cuttings/form/CuttingPosSummaryPanel.vue
View File

@ -46,7 +46,7 @@ const emit = defineEmits<{
</script>
<template>
<Card class="h-fit xl:sticky xl:top-4">
<Card class="h-fit min-w-0 xl:sticky xl:top-4">
<CardHeader class="pb-3">
<CardTitle class="flex items-center justify-between gap-2 text-base">
<span class="flex items-center gap-2">
@ -61,7 +61,7 @@ const emit = defineEmits<{
</span>
</CardTitle>
</CardHeader>
<CardContent>
<CardContent class="min-w-0">
<form @submit.prevent="emit('submit')">
<FieldGroup>
<FieldSet class="grid gap-4">

4
resources/js/pages/admin/manage/cuttings/table/CuttingGroupedTable.vue
View File

@ -193,7 +193,7 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
<h4 class="text-sm font-semibold tracking-tight text-foreground">
Bahan Baku
</h4>
<div class="rounded-md border">
<div class="overflow-x-auto rounded-md border">
<Table>
<TableHeader>
<TableRow>
@ -266,7 +266,7 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
<h4 class="text-sm font-semibold tracking-tight text-foreground">
Hasil Produk
</h4>
<div class="rounded-md border">
<div class="overflow-x-auto rounded-md border">
<Table>
<TableHeader>
<TableRow>