Skip to content

Commit 02b0721

Browse files
jdamcdclaude
jdamcd
and
claude
committed
Optimize mobile layout and styling
- Add viewport-fit and theme-color meta tags for iOS - Set body background to match toolbar color - Add safe area insets for iOS notch and home indicator - Use dynamic viewport height (100dvh) for better mobile support - Make header and footer text responsive (smaller on mobile) - Improve stats display with flexbox wrapping and non-breaking spaces - Keep Period filter label and buttons on same line - Align custom date fields with filter buttons Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1 parent 7933063 commit 02b0721

4 files changed

Lines changed: 48 additions & 30 deletions

File tree

‎index.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
7+
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
8+
<meta name="theme-color" content="#1f2937" media="(prefers-color-scheme: dark)" />
79
<title>tripm.app</title>
810
</head>
911
<body>

‎src/App.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -159,8 +159,8 @@ function App() {
159159
{/* Header */}
160160
<header className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-3">
161161
<div className="max-w-7xl mx-auto flex items-center justify-between">
162-
<h1 className="text-xl font-bold text-gray-900 dark:text-white">tripm.app</h1>
163-
<p className="text-sm text-gray-500 dark:text-gray-400">
162+
<h1 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white">tripm.app</h1>
163+
<p className="text-xs md:text-sm text-gray-500 dark:text-gray-400">
164164
Extract travel history from your calendar
165165
</p>
166166
</div>
@@ -235,15 +235,19 @@ function App() {
235235
</div>
236236
</div>
237237
</div>
238-
<div className="text-sm text-gray-600 dark:text-gray-300">
239-
<span className="font-semibold text-blue-600 dark:text-blue-400">
240-
{totalCountries}
241-
</span>{' '}
242-
{totalCountries === 1 ? 'country' : 'countries'} /{' '}
243-
<span className="font-semibold text-blue-600 dark:text-blue-400">
244-
{totalVisits}
245-
</span>{' '}
246-
{totalVisits === 1 ? 'trip' : 'trips'}
238+
<div className="text-sm text-gray-600 dark:text-gray-300 flex flex-wrap gap-x-2 gap-y-0.5">
239+
<span className="whitespace-nowrap">
240+
<span className="font-semibold text-blue-600 dark:text-blue-400">
241+
{totalCountries}
242+
</span>{'\u00A0'}
243+
{totalCountries === 1 ? 'country' : 'countries'}
244+
</span>
245+
<span className="whitespace-nowrap">
246+
<span className="font-semibold text-blue-600 dark:text-blue-400">
247+
{totalVisits}
248+
</span>{'\u00A0'}
249+
{totalVisits === 1 ? 'trip' : 'trips'}
250+
</span>
247251
</div>
248252
</div>
249253
</div>
@@ -290,7 +294,7 @@ function App() {
290294

291295
{/* Footer */}
292296
<footer className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-4 py-3 mt-auto">
293-
<div className="max-w-7xl mx-auto text-center text-sm text-gray-500 dark:text-gray-400">
297+
<div className="max-w-7xl mx-auto text-center text-xs md:text-sm text-gray-500 dark:text-gray-400">
294298
All data is processed locally in your browser. Use import / export to back up your trip history. <a href="https://github.com/jdamcd/trip-map" target="_blank" rel="noopener noreferrer" className="hover:text-gray-700 dark:hover:text-gray-300 underline">Source code on GitHub</a>.
295299
</div>
296300
</footer>

‎src/components/DateRangeFilter.tsx‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -78,26 +78,28 @@ export function DateRangeFilter({ dateRange, onChange }: DateRangeFilterProps) {
7878

7979
return (
8080
<div className="flex flex-wrap items-center gap-2">
81-
<span className="w-12 shrink-0 text-sm text-gray-500 dark:text-gray-400">Period</span>
82-
83-
<div className="flex flex-wrap gap-2">
84-
{presets.map(({ value, label }) => (
85-
<button
86-
key={value}
87-
onClick={() => handlePresetChange(value)}
88-
className={`px-3 py-1 text-sm rounded border ${
89-
currentPreset === value
90-
? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
91-
: 'border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:border-gray-400 dark:hover:border-gray-500'
92-
}`}
93-
>
94-
{label}
95-
</button>
96-
))}
81+
<div className="flex items-center gap-2">
82+
<span className="w-12 shrink-0 text-sm text-gray-500 dark:text-gray-400">Period</span>
83+
84+
<div className="flex flex-wrap gap-2">
85+
{presets.map(({ value, label }) => (
86+
<button
87+
key={value}
88+
onClick={() => handlePresetChange(value)}
89+
className={`px-3 py-1 text-sm rounded border ${
90+
currentPreset === value
91+
? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
92+
: 'border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:border-gray-400 dark:hover:border-gray-500'
93+
}`}
94+
>
95+
{label}
96+
</button>
97+
))}
98+
</div>
9799
</div>
98100

99101
{showCustom && (
100-
<div className="flex items-center gap-2">
102+
<div className="flex items-center gap-2 ml-14">
101103
<input
102104
type="date"
103105
value={format(dateRange.start, 'yyyy-MM-dd')}

‎src/index.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,20 @@
33
body {
44
margin: 0;
55
min-height: 100vh;
6+
min-height: 100dvh; /* Dynamic viewport height for mobile */
7+
background-color: #ffffff;
8+
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
9+
}
10+
11+
@media (prefers-color-scheme: dark) {
12+
body {
13+
background-color: #1f2937;
14+
}
615
}
716

817
#root {
918
min-height: 100vh;
19+
min-height: 100dvh; /* Dynamic viewport height for mobile */
1020
}
1121

1222
/* Dark mode popup styling for Mapbox */

0 commit comments

Comments
 (0)