jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: move search bar to second row on mobile header 

On screens <= 640px, the header wraps to two rows: logo/app-switcher
and identity on top, "Ask Mi Anything" search bar full-width below.
Header and tab row switch from fixed to sticky positioning on mobile,
eliminating the need for magic padding-top values on #app.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-28 07:17:38 +00:00
parent 9db9c89bed
commit e55e56bc06
2 changed files with 30 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
server/shell.ts
View File

@ -54,7 +54,7 @@ export function renderShell(opts: ShellOptions): string {
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌌</text></svg>">
<title>${escapeHtml(title)}</title>
<link rel="stylesheet" href="/shell.css?v=2">
<link rel="stylesheet" href="/shell.css?v=3">
<style>
/* When loaded inside an iframe (e.g. standalone domain redirecting back),
hide the shell chrome — the parent rSpace page already provides it. */
@ -461,7 +461,7 @@ export function renderModuleLanding(opts: ModuleLandingOptions): string {
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>${mod.icon}</text></svg>">
<title>${escapeHtml(mod.name)} — rSpace</title>
<link rel="stylesheet" href="/shell.css?v=2">
<link rel="stylesheet" href="/shell.css?v=3">
${cssBlock}
<script defer src="https://rdata.online/collect.js" data-website-id="6ee7917b-0ed7-44cb-a4c8-91037638526b"></script>
</head>

31
website/public/shell.css
View File

@ -232,11 +232,37 @@ body[data-theme="light"] {
/* ── Mobile adjustments ── */
@media (max-width: 640px) {
/* Switch header + tab row from fixed to sticky on mobile.
This avoids needing a magic padding-top on #app and lets
the header wrap naturally to two rows. */
.rstack-header {
padding: 0 12px;
position: sticky;
padding: 6px 12px;
height: auto;
flex-wrap: wrap;
gap: 0;
}
.rstack-header__left {
flex: 1;
min-width: 0;
}
.rstack-header__center {
order: 3;
flex-basis: 100%;
padding: 4px 0 2px;
justify-content: stretch;
}
.rstack-header__right {
flex-shrink: 0;
}
.rstack-tab-row {
position: sticky;
}
#app {
padding-top: 82px;
padding-top: 0;
}
#app.canvas-layout {
padding-top: 0;
}
.rapp-nav {
flex-wrap: wrap;
@ -246,7 +272,6 @@ body[data-theme="light"] {
@media (max-width: 480px) {
#app {
padding-top: 78px;
padding-left: 8px;
padding-right: 8px;
}