fix: 修正 A4 列印表格在商品名稱過長時被過度擠壓換行的排版 bug

This commit is contained in:
sky121113 2026-05-21 15:56:51 +08:00
parent 99e6e37953
commit 88a58d33c0
2 changed files with 28 additions and 28 deletions

View File

@ -139,32 +139,32 @@
<div class="py-8">
<h3 class="text-xs font-black text-slate-900 uppercase tracking-[0.2em] mb-4 font-display">{{ __('Replenishment Details') }} ({{ $items->count() }} {{ __('Items') }})</h3>
<table class="w-full text-left border-collapse">
<table class="w-full text-left border-collapse table-fixed">
<thead>
<tr class="border-b-2 border-slate-900 print-border bg-slate-50 print-bg-gray">
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-16 text-center">
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-16 text-center whitespace-nowrap">
{{ __('Slot') }}
</th>
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-12">
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-16 text-center whitespace-nowrap">
{{ __('Image') }}
</th>
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest">
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest min-w-[200px] whitespace-nowrap">
{{ __('Product Name') }}
</th>
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-36">
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-28 whitespace-nowrap">
{{ __('Barcode') }}
</th>
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-24 text-right">
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-24 text-right whitespace-nowrap">
{{ __('Stock Snap') }}
</th>
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-24 text-right">
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-24 text-right whitespace-nowrap">
{{ __('Replenish Qty') }}
</th>
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-28 text-center no-print">
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-20 text-center no-print whitespace-nowrap">
{{ __('Check') }}
</th>
<!-- 列印時顯示的手寫格 -->
<th class="hidden print:table-cell px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-24 text-center">
<th class="hidden print:table-cell px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-24 text-center whitespace-nowrap">
{{ __('Actual Qty') }}
</th>
</tr>
@ -178,7 +178,7 @@
</span>
</td>
<td class="px-4 py-3">
<div class="w-10 h-10 rounded-lg border border-slate-200 print-border overflow-hidden bg-slate-50 flex items-center justify-center shrink-0">
<div class="mx-auto w-10 h-10 rounded-lg border border-slate-200 print-border overflow-hidden bg-slate-50 flex items-center justify-center shrink-0">
@if($item->product?->image_url)
<img src="{{ $item->product->image_url }}" class="w-full h-full object-cover">
@else
@ -186,17 +186,17 @@
@endif
</div>
</td>
<td class="px-4 py-3">
<p class="text-sm font-extrabold text-slate-800 tracking-tight">{{ $item->product?->localized_name ?? __('Unknown') }}</p>
<td class="px-4 py-3 min-w-[200px] break-words">
<p class="text-sm font-extrabold text-slate-800 tracking-tight whitespace-normal">{{ $item->product?->localized_name ?? __('Unknown') }}</p>
<p class="text-[9px] font-mono font-bold text-slate-400 uppercase tracking-widest mt-0.5">ID: {{ $item->product_id }}</p>
</td>
<td class="px-4 py-3 font-mono text-xs font-bold text-slate-500">
<td class="px-4 py-3 font-mono text-xs font-bold text-slate-500 break-all">
{{ $item->product?->barcode ?? '-' }}
</td>
<td class="px-4 py-3 text-right text-xs font-bold text-slate-500 font-mono">
<td class="px-4 py-3 text-right text-xs font-bold text-slate-500 font-mono whitespace-nowrap">
{{ $item->current_stock }} / {{ $item->max_stock }}
</td>
<td class="px-4 py-3 text-right">
<td class="px-4 py-3 text-right whitespace-nowrap">
<p class="text-lg font-black text-cyan-600 font-display tracking-tight">x{{ $item->quantity }}</p>
</td>
<!-- UI 頁面上的 check 欄位 -->

View File

@ -151,29 +151,29 @@
<div class="py-8">
<h3 class="text-xs font-black text-slate-900 uppercase tracking-[0.2em] mb-4 font-display">{{ __('Transfer Details') }} ({{ $items->count() }} {{ __('Items') }})</h3>
<table class="w-full text-left border-collapse">
<table class="w-full text-left border-collapse table-fixed">
<thead>
<tr class="border-b-2 border-slate-900 print-border bg-slate-50 print-bg-gray">
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-16 text-center">
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-16 text-center whitespace-nowrap">
#
</th>
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-12">
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-16 text-center whitespace-nowrap">
{{ __('Image') }}
</th>
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest">
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest min-w-[200px] whitespace-nowrap">
{{ __('Product Name') }}
</th>
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-40">
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-32 whitespace-nowrap">
{{ __('Barcode') }}
</th>
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-28 text-right">
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-24 text-right whitespace-nowrap">
{{ __('Transfer Qty') }}
</th>
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-28 text-center no-print">
<th class="px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-20 text-center no-print whitespace-nowrap">
{{ __('Check') }}
</th>
<!-- 列印時顯示的手寫格 -->
<th class="hidden print:table-cell px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-24 text-center">
<th class="hidden print:table-cell px-4 py-3 text-[10px] font-black text-slate-500 uppercase tracking-widest w-24 text-center whitespace-nowrap">
{{ __('Actual Qty') }}
</th>
</tr>
@ -185,7 +185,7 @@
{{ $index + 1 }}
</td>
<td class="px-4 py-3">
<div class="w-10 h-10 rounded-lg border border-slate-200 print-border overflow-hidden bg-slate-50 flex items-center justify-center shrink-0">
<div class="mx-auto w-10 h-10 rounded-lg border border-slate-200 print-border overflow-hidden bg-slate-50 flex items-center justify-center shrink-0">
@if($item->product?->image_url)
<img src="{{ $item->product->image_url }}" class="w-full h-full object-cover">
@else
@ -193,14 +193,14 @@
@endif
</div>
</td>
<td class="px-4 py-3">
<p class="text-sm font-extrabold text-slate-800 tracking-tight">{{ $item->product?->localized_name ?? __('Unknown') }}</p>
<td class="px-4 py-3 min-w-[200px] break-words">
<p class="text-sm font-extrabold text-slate-800 tracking-tight whitespace-normal">{{ $item->product?->localized_name ?? __('Unknown') }}</p>
<p class="text-[9px] font-mono font-bold text-slate-400 uppercase tracking-widest mt-0.5">ID: {{ $item->product_id }}</p>
</td>
<td class="px-4 py-3 font-mono text-xs font-bold text-slate-500">
<td class="px-4 py-3 font-mono text-xs font-bold text-slate-500 break-all">
{{ $item->product?->barcode ?? '-' }}
</td>
<td class="px-4 py-3 text-right">
<td class="px-4 py-3 text-right whitespace-nowrap">
<p class="text-lg font-black text-cyan-600 font-display tracking-tight">x{{ $item->quantity }}</p>
</td>
<!-- UI 頁面上的 check 欄位 -->