experiments in a post-browser web
fix(nav): restore full-width navbar — remove floating bubble design
The navbar in page view was re-implemented as a centered floating bubble
(position: fixed, centered at 50%, max-width 600px, box-shadow, rounded
corners) which lost the carefully-tuned full-width design.
Restore the original navbar design from commit 2eb7a7037b92:
- position: absolute, top: 0, left: 0, right: 0 (full window width)
- No border, no border-radius, no box-shadow (no bubble effect)
- -webkit-app-region: drag (navbar is the window drag handle)
- 36px height matching the original design
- Trigger zone back to 50px (was shrunk to 12px)
Keep the webview push-down mechanism (.navbar-active class) that was
added later to solve Electron's composited <webview> layer rendering
over host DOM — but adjust push-down from 90px to 36px to match the
navbar height exactly.
+20
-26
+15
-21
app/page/index.html
+15
-21
app/page/index.html
···
34
34
transition: top 0.15s ease;
35
35
}
36
36
37
-
/* Push webview down when navbar is active so it doesn't cover the floating bar */
37
+
/* Push webview down when navbar is active so it doesn't cover the navbar */
38
38
webview.navbar-active {
39
-
top: 90px;
40
-
border-radius: 0 0 10px 10px;
39
+
top: 36px;
41
40
}
42
41
43
42
/*
44
-
* FLOATING NAVBAR — NOT an inline/embedded bar.
43
+
* Navbar — full-width bar at the top of the window.
45
44
*
46
45
* Shown via Cmd+L or hovering near the top of the window.
47
-
* Centered, floating above content with shadow.
48
-
* Does NOT use -webkit-app-region: drag.
46
+
* Same width as the page, no floating bubble effect.
47
+
* Draggable via -webkit-app-region: drag.
49
48
*/
50
49
.navbar {
51
-
position: fixed;
52
-
top: 40px;
53
-
left: 50%;
54
-
transform: translateX(-50%);
55
-
width: min(90%, 600px);
56
-
height: 40px;
50
+
position: absolute;
51
+
top: 0; left: 0; right: 0;
52
+
height: 36px;
57
53
display: none;
58
54
align-items: center;
59
55
gap: 8px;
60
56
padding: 0 12px;
61
-
background: var(--theme-bg-secondary, rgba(30, 30, 30, 0.95));
62
-
backdrop-filter: blur(20px);
63
-
-webkit-backdrop-filter: blur(20px);
57
+
background: var(--theme-bg-secondary, rgba(30, 30, 30, 0.92));
58
+
backdrop-filter: blur(12px);
59
+
-webkit-backdrop-filter: blur(12px);
64
60
color: var(--theme-text, #e0e0e0);
65
61
font-family: var(--theme-font-sans, system-ui, -apple-system, BlinkMacSystemFont, sans-serif);
66
62
font-size: 15px;
67
-
border: 1px solid rgba(255, 255, 255, 0.1);
68
-
border-radius: 10px;
69
-
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
70
-
-webkit-app-region: no-drag;
63
+
border: none;
64
+
-webkit-app-region: drag;
71
65
user-select: none;
72
66
-webkit-user-select: none;
73
67
z-index: 100;
···
128
122
background: var(--theme-bg, rgba(128, 128, 128, 0.18));
129
123
}
130
124
131
-
/* Trigger zone at top of window — hover here to reveal the floating navbar */
125
+
/* Trigger zone at top of window — hover here to reveal the navbar */
132
126
.trigger-zone {
133
127
position: absolute;
134
128
top: 0; left: 0; right: 0;
135
-
height: 12px;
129
+
height: 50px;
136
130
z-index: 50;
137
131
}
138
132
+5
-5
app/page/page.js
+5
-5
app/page/page.js
···
3
3
*
4
4
* Content-sized BrowserWindow with:
5
5
* - Webview filling the entire window
6
-
* - Floating navbar overlay (Cmd+L or hover near top to show, Escape/click-outside to dismiss)
7
-
* NOT embedded in window chrome — floats over content like a command palette
6
+
* - Full-width navbar at the top (Cmd+L or hover near top to show, Escape/click-outside to dismiss)
8
7
* - When shown, the webview shifts down so the Electron <webview> layer doesn't cover the navbar
8
+
* - Drag via -webkit-app-region: drag on the navbar
9
9
* - Resize via IPC to resize the BrowserWindow
10
10
*/
11
11
···
89
89
}
90
90
91
91
// --- Show / Hide navbar ---
92
-
// The floating navbar is shown by:
92
+
// The full-width navbar is shown by:
93
93
// 1. Cmd+L (published from main process via before-input-event on guest/host webContents)
94
94
// 2. Hovering near the top of the window (trigger zone)
95
95
// It is hidden by clicking outside, pressing Escape, or moving mouse away (hover mode).
96
96
//
97
97
// When visible, the <webview> element shifts down (via .navbar-active class) so the
98
-
// Electron composited webview layer doesn't paint over the floating navbar.
98
+
// Electron composited webview layer doesn't paint over the navbar.
99
99
100
100
let hideTimer = null;
101
101
let showSource = null; // 'hover' or 'shortcut' — determines dismiss behavior
···
188
188
if (showSource === 'hover') scheduleHide();
189
189
});
190
190
191
-
// Cmd+L: show floating navbar with URL focus
191
+
// Cmd+L: show navbar with URL focus
192
192
// Published from main process with GLOBAL scope (both host and webview guest fire this)
193
193
api.subscribe('page:show-navbar', () => show({ focusUrl: true, source: 'shortcut' }), api.scopes.GLOBAL);
194
194