fix: update layout and styling for better responsiveness in various components

This commit is contained in:
Yoga Pangestu 2026-08-14 05:28:45 +07:00
parent c49027492c
commit 8ad735fbf9
8 changed files with 47 additions and 47 deletions

View File

@ -337,7 +337,7 @@ export default function CuttingCreate({ rawMaterials }: Props) {
<CardHeader>
<CardTitle>Pilih Bahan Baku</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<CardContent className="max-h-[calc(100vh-16rem)] space-y-4 overflow-y-auto">
<div className="grid gap-2">
<Label>
Nama Bahan Baku <span className="text-destructive">*</span>
@ -386,7 +386,7 @@ export default function CuttingCreate({ rawMaterials }: Props) {
const addedCount = materials.filter((m) => m.raw_material_price_id === price.id).length;
return (
<div key={price.id} className={isAdded ? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3' : 'flex items-center justify-between gap-3 rounded-lg border p-3'}>
<div key={price.id} className={`flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3 ${isAdded ? 'border-primary' : ''}`}>
<div className="flex min-w-0 items-center gap-3">
{price.photo_url ? (
<img src={price.photo_url} alt={price.variant} className="h-10 w-10 shrink-0 rounded-md object-cover" />
@ -401,7 +401,7 @@ export default function CuttingCreate({ rawMaterials }: Props) {
</p>
</div>
</div>
<div className="flex shrink-0 items-center gap-1">
<div className="flex items-center gap-1">
<Button type="button" variant="outline" size="sm" onClick={() => addVariant(rm, price.id)}>
<Plus className="h-4 w-4" />
Tambah
@ -432,7 +432,7 @@ export default function CuttingCreate({ rawMaterials }: Props) {
const addedCount = materials.filter((m) => m.raw_material_price_id === price.id).length;
return (
<div key={price.id} className={isAdded ? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3' : 'flex items-center justify-between gap-3 rounded-lg border p-3'}>
<div key={price.id} className={`flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3 ${isAdded ? 'border-primary' : ''}`}>
<div className="flex min-w-0 items-center gap-3">
{price.photo_url ? (
<img src={price.photo_url} alt={price.variant} className="h-10 w-10 shrink-0 rounded-md object-cover" />
@ -447,7 +447,7 @@ export default function CuttingCreate({ rawMaterials }: Props) {
</p>
</div>
</div>
<div className="flex shrink-0 items-center gap-1">
<div className="flex items-center gap-1">
<Button type="button" variant="outline" size="sm" onClick={() => addVariant(selectedMaterial, price.id)}>
<Plus className="h-4 w-4" />
Tambah

View File

@ -313,7 +313,7 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
<CardHeader>
<CardTitle>Pilih Bahan Baku</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<CardContent className="max-h-[calc(100vh-16rem)] space-y-4 overflow-y-auto">
<div className="grid gap-2">
<Label>
Nama Bahan Baku <span className="text-destructive">*</span>
@ -362,7 +362,7 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
const addedCount = materials.filter((m) => m.raw_material_price_id === price.id).length;
return (
<div key={price.id} className={isAdded ? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3' : 'flex items-center justify-between gap-3 rounded-lg border p-3'}>
<div key={price.id} className={`flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3 ${isAdded ? 'border-primary' : ''}`}>
<div className="flex min-w-0 items-center gap-3">
{price.photo_url ? (
<img src={price.photo_url} alt={price.variant} className="h-10 w-10 shrink-0 rounded-md object-cover" />
@ -377,7 +377,7 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
</p>
</div>
</div>
<div className="flex shrink-0 items-center gap-1">
<div className="flex items-center gap-1">
<Button type="button" variant="outline" size="sm" onClick={() => addVariant(rm, price.id)}>
<Plus className="h-4 w-4" />
Tambah
@ -408,7 +408,7 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
const addedCount = materials.filter((m) => m.raw_material_price_id === price.id).length;
return (
<div key={price.id} className={isAdded ? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3' : 'flex items-center justify-between gap-3 rounded-lg border p-3'}>
<div key={price.id} className={`flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3 ${isAdded ? 'border-primary' : ''}`}>
<div className="flex min-w-0 items-center gap-3">
{price.photo_url ? (
<img src={price.photo_url} alt={price.variant} className="h-10 w-10 shrink-0 rounded-md object-cover" />
@ -423,7 +423,7 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
</p>
</div>
</div>
<div className="flex shrink-0 items-center gap-1">
<div className="flex items-center gap-1">
<Button type="button" variant="outline" size="sm" onClick={() => addVariant(selectedMaterial, price.id)}>
<Plus className="h-4 w-4" />
Tambah

View File

@ -866,8 +866,8 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
] ??
0) >
0
? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3'
: 'flex items-center justify-between gap-3 rounded-lg border p-3'
? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
: 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
}
>
<div className="flex min-w-0 items-center gap-3">
@ -909,7 +909,7 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
</p>
</div>
</div>
<div className="flex shrink-0 items-center gap-2">
<div className="flex items-center gap-2">
<Button
type="button"
variant="outline"

View File

@ -306,9 +306,9 @@ export default function PurchaseEdit({
.id
] ??
0) >
0
? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3'
: 'flex items-center justify-between gap-3 rounded-lg border p-3'
0
? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
: 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
}
>
<div className="flex min-w-0 items-center gap-3">
@ -350,7 +350,7 @@ export default function PurchaseEdit({
</p>
</div>
</div>
<div className="flex shrink-0 items-center gap-2">
<div className="flex items-center gap-2">
<Button
type="button"
variant="outline"

View File

@ -308,8 +308,8 @@ return 0;
variant
.id
] ?? 0) > 0
? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3'
: 'flex items-center justify-between gap-3 rounded-lg border p-3'
? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
: 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
}
>
<div className="flex min-w-0 items-center gap-3">
@ -351,7 +351,7 @@ return 0;
</p>
</div>
</div>
<div className="flex shrink-0 items-center gap-2">
<div className="flex items-center gap-2">
<Button
type="button"
variant="outline"

View File

@ -236,8 +236,8 @@ return 0;
variant
.id
] ?? 0) > 0
? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3'
: 'flex items-center justify-between gap-3 rounded-lg border p-3'
? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
: 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
}
>
<div className="flex min-w-0 items-center gap-3">
@ -279,7 +279,7 @@ return 0;
</p>
</div>
</div>
<div className="flex shrink-0 items-center gap-2">
<div className="flex items-center gap-2">
<Button
type="button"
variant="outline"

View File

@ -396,17 +396,17 @@ export default function TransactionCreate({
: variant.reject_stock;
return (
<div
key={variant.id}
className={
(quantities[
variant
.id
] ?? 0) > 0
? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3'
: 'flex items-center justify-between gap-3 rounded-lg border p-3'
}
>
<div
key={variant.id}
className={
(quantities[
variant
.id
] ?? 0) > 0
? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
: 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
}
>
<div className="flex min-w-0 items-center gap-3">
{variant.photo_url ? (
<img
@ -450,7 +450,7 @@ export default function TransactionCreate({
</p>
</div>
</div>
<div className="flex shrink-0 items-center gap-2">
<div className="flex items-center gap-2">
<Button
type="button"
variant="outline"

View File

@ -376,17 +376,17 @@ export default function TransactionEdit({
: variant.reject_stock;
return (
<div
key={variant.id}
className={
(quantities[
variant
.id
] ?? 0) > 0
? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3'
: 'flex items-center justify-between gap-3 rounded-lg border p-3'
}
>
<div
key={variant.id}
className={
(quantities[
variant
.id
] ?? 0) > 0
? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
: 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
}
>
<div className="flex min-w-0 items-center gap-3">
{variant.photo_url ? (
<img
@ -430,7 +430,7 @@ export default function TransactionEdit({
</p>
</div>
</div>
<div className="flex shrink-0 items-center gap-2">
<div className="flex items-center gap-2">
<Button
type="button"
variant="outline"