experiments in a post-browser web
fix(mobile): tighten header layout alignment
Reduce header side padding to align Peek title with list content.
Add flex spacers to visually group filter icons and sort button
in center, with title and settings gear at edges. Tighten filter
button padding for compact header.
+12
-9
+1
-1
backend/tauri-mobile/src-tauri/gen/apple/assets/index.html
+1
-1
backend/tauri-mobile/src-tauri/gen/apple/assets/index.html
···
8
8
// Redirect to dev server on localhost
9
9
// iOS simulator can access Mac's localhost
10
10
// Vite is guaranteed running before app launch (dev-ios-sim.sh waits for it)
11
-
window.location.href = 'http://localhost:__DEV_PORT__/';
11
+
window.location.href = 'http://localhost:57521/';
12
12
</script>
13
13
</head>
14
14
<body>
+2
-1
backend/tauri-mobile/src-tauri/tauri.conf.json
+2
-1
backend/tauri-mobile/src-tauri/tauri.conf.json
+6
-6
backend/tauri-mobile/src/App.css
+6
-6
backend/tauri-mobile/src/App.css
···
121
121
122
122
header {
123
123
background: #ffffff;
124
-
padding: 0.25rem 1rem;
124
+
padding: 0.25rem 0.75rem;
125
125
padding-top: calc(env(safe-area-inset-top, 0px) + 0.4rem);
126
126
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
127
127
position: sticky;
···
1076
1076
header {
1077
1077
display: flex;
1078
1078
align-items: center;
1079
-
justify-content: space-between;
1080
-
gap: 0.5rem;
1079
+
gap: 0.25rem;
1081
1080
}
1082
1081
1083
1082
header h1 {
···
1087
1086
.header-btn {
1088
1087
background: transparent;
1089
1088
border: none;
1090
-
padding: 0.5rem;
1089
+
padding: 0.35rem;
1091
1090
cursor: pointer;
1092
1091
display: flex;
1093
1092
align-items: center;
1094
1093
justify-content: center;
1095
1094
color: #007aff;
1096
1095
font-size: 1rem;
1096
+
flex-shrink: 0;
1097
1097
}
1098
1098
1099
1099
.header-spacer {
···
1615
1615
.filter-btn {
1616
1616
display: flex;
1617
1617
align-items: center;
1618
-
gap: 0.2rem;
1619
-
padding: 0.3rem 0.5rem;
1618
+
gap: 0.15rem;
1619
+
padding: 0.3rem 0.3rem;
1620
1620
background: transparent;
1621
1621
border: none;
1622
1622
border-radius: 12px;
+2
backend/tauri-mobile/src/App.tsx
+2
backend/tauri-mobile/src/App.tsx
···
3346
3346
>
3347
3347
Peek <span style={{ fontSize: '0.5em', opacity: 0.5 }}>{__BUILD_NUMBER__}</span>
3348
3348
</h1>
3349
+
<div style={{ flex: 1 }} />
3349
3350
<div className="filter-icons">
3350
3351
<button
3351
3352
className={`filter-btn ${activeFilter === "page" ? "active" : ""}`}
···
3413
3414
</svg>
3414
3415
)}
3415
3416
</button>
3417
+
<div style={{ flex: 1 }} />
3416
3418
<button className={`header-btn settings-btn ${isSyncing ? 'syncing' : ''}`} onClick={() => setShowSettings(true)}>
3417
3419
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
3418
3420
<circle cx="12" cy="12" r="3"></circle>