hotel-manage-stack/cashup
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Fix mobile overflow on reconciliation, safe count, and settings tables

Browse source 
Tables with multiple columns now scroll horizontally within their cards
instead of overflowing off-screen on mobile.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-14 11:59:15 +00:00
parent 82348bc834
commit 2b04d99fd6
3 changed files with 14 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/pages/DailyCashUp.tsx
View file

@ -476,7 +476,8 @@ export function DailyCashUp({ user }: Props) {
{newbookTotals && ( {newbookTotals && (
<> <>
<table style={{ width: '100%', fontSize: '0.875rem', borderCollapse: 'collapse' }}> <div style={{ overflowX: 'auto' }}>
<table style={{ width: '100%', fontSize: '0.875rem', borderCollapse: 'collapse', minWidth: '360px' }}>
<thead> <thead>
<tr style={{ borderBottom: '2px solid var(--card-border)' }}> <tr style={{ borderBottom: '2px solid var(--card-border)' }}>
<th style={{ padding: '0.4rem 0.5rem', textAlign: 'left', color: 'var(--text-mid)', fontWeight: 600 }}>Category</th> <th style={{ padding: '0.4rem 0.5rem', textAlign: 'left', color: 'var(--text-mid)', fontWeight: 600 }}>Category</th>
@ -522,12 +523,14 @@ export function DailyCashUp({ user }: Props) {
})} })}
</tbody> </tbody>
</table> </table>
</div>
{tillPayments.length > 0 && ( {tillPayments.length > 0 && (
<div style={{ marginTop: '1rem' }}> <div style={{ marginTop: '1rem' }}>
<h3 style={{ fontSize: '0.875rem', fontWeight: 600, marginBottom: '0.5rem', color: 'var(--text-mid)' }}> <h3 style={{ fontSize: '0.875rem', fontWeight: 600, marginBottom: '0.5rem', color: 'var(--text-mid)' }}>
Till / Restaurant Transactions Till / Restaurant Transactions
</h3> </h3>
<div style={{ overflowX: 'auto' }}>
<table style={{ width: '100%', fontSize: '0.8rem', borderCollapse: 'collapse' }}> <table style={{ width: '100%', fontSize: '0.8rem', borderCollapse: 'collapse' }}>
<thead> <thead>
<tr style={{ borderBottom: '1px solid var(--card-border)' }}> <tr style={{ borderBottom: '1px solid var(--card-border)' }}>
@ -546,6 +549,7 @@ export function DailyCashUp({ user }: Props) {
))} ))}
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
)} )}
{transactionBreakdown && ( {transactionBreakdown && (

4
frontend/src/pages/SafeCount.tsx
View file

@ -134,7 +134,8 @@ function SafeCountAdjust() {
)} )}
<Card style={{ marginBottom: '1rem', padding: 0, overflow: 'hidden' }}> <Card style={{ marginBottom: '1rem', padding: 0, overflow: 'hidden' }}>
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.875rem' }}> <div style={{ overflowX: 'auto' }}>
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.875rem', minWidth: '380px' }}>
<thead> <thead>
<tr style={{ background: 'var(--body-bg)', borderBottom: '2px solid var(--card-border)' }}> <tr style={{ background: 'var(--body-bg)', borderBottom: '2px solid var(--card-border)' }}>
<th style={thL}>Denomination</th> <th style={thL}>Denomination</th>
@ -198,6 +199,7 @@ function SafeCountAdjust() {
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
</div>
</Card> </Card>
<Card style={{ marginBottom: '1rem' }}> <Card style={{ marginBottom: '1rem' }}>

8
frontend/src/pages/Settings.tsx
View file

@ -260,7 +260,8 @@ export function SettingsPage({ user }: { user: User }) {
<p style={{ fontSize: '0.75rem', color: 'var(--text-mid)', marginBottom: '0.75rem' }}> <p style={{ fontSize: '0.75rem', color: 'var(--text-mid)', marginBottom: '0.75rem' }}>
Set par stock targets. Coins use sealed bags; notes use individual note count. Set par stock targets. Coins use sealed bags; notes use individual note count.
</p> </p>
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.8rem' }}> <div style={{ overflowX: 'auto' }}>
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.8rem', minWidth: '420px' }}>
<thead> <thead>
<tr style={{ borderBottom: '2px solid var(--card-border)' }}> <tr style={{ borderBottom: '2px solid var(--card-border)' }}>
<th style={thS}>Denom</th> <th style={thS}>Denom</th>
@ -300,6 +301,7 @@ export function SettingsPage({ user }: { user: User }) {
})} })}
</tbody> </tbody>
</table> </table>
</div>
</Card> </Card>
{/* Sales breakdown GL columns — requires settings capability */} {/* Sales breakdown GL columns — requires settings capability */}
@ -319,7 +321,8 @@ export function SettingsPage({ user }: { user: User }) {
No columns configured. Click "Sync from Newbook" to import GL account groups, or "+ Placeholder" to add a blank column. No columns configured. Click "Sync from Newbook" to import GL account groups, or "+ Placeholder" to add a blank column.
</p> </p>
) : ( ) : (
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}> <div style={{ overflowX: 'auto' }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', minWidth: '380px' }}>
{columns.map((col, i) => ( {columns.map((col, i) => (
<div key={i} style={{ <div key={i} style={{
display: 'grid', gridTemplateColumns: '24px 1fr 140px 60px 28px', gap: '0.5rem', display: 'grid', gridTemplateColumns: '24px 1fr 140px 60px 28px', gap: '0.5rem',
@ -349,6 +352,7 @@ export function SettingsPage({ user }: { user: User }) {
</div> </div>
))} ))}
</div> </div>
</div>
)} )}
</Card> </Card>
)} )}