dirtydishes/islandflow
1
0
Fork 0
Code Issues 2 Pull requests 4 Projects Releases Packages Wiki Activity Actions 1

Tighten terminal topbar layout

Browse source
This commit is contained in:
dirtydishes 2026-04-27 12:02:50 -04:00
parent af46f15d6f
commit 824b7f2fa0
2 changed files with 86 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

72
apps/web/app/globals.css
View file

@ -159,18 +159,18 @@ input {
.terminal-frame { .terminal-frame {
min-width: 0; min-width: 0;
display: grid; display: grid;
grid-template-rows: var(--topbar-height) minmax(0, 1fr); grid-template-rows: minmax(var(--topbar-height), auto) minmax(0, 1fr);
} }
.terminal-topbar { .terminal-topbar {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 20; z-index: 20;
display: flex; display: grid;
align-items: center; grid-template-columns: minmax(0, 1fr) auto;
justify-content: space-between; align-items: end;
gap: 18px; gap: 18px 24px;
padding: 14px 24px; padding: 16px 24px 14px;
background: rgba(7, 10, 14, 0.92); background: rgba(7, 10, 14, 0.92);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
@ -181,6 +181,7 @@ input {
align-items: center; align-items: center;
gap: 10px; gap: 10px;
flex-wrap: wrap; flex-wrap: wrap;
min-width: 0;
} }
.feed-status { .feed-status {
@ -226,18 +227,35 @@ input {
box-shadow: 0 0 0 4px rgba(255, 107, 95, 0.12); box-shadow: 0 0 0 4px rgba(255, 107, 95, 0.12);
} }
.terminal-topbar-actions {
display: flex;
align-items: flex-end;
justify-content: flex-end;
gap: 20px;
min-width: 0;
}
.terminal-topbar-controls { .terminal-topbar-controls {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
gap: 14px; justify-content: flex-end;
flex-wrap: wrap; gap: 12px;
min-width: 0;
}
.terminal-topbar-mode {
display: flex;
align-items: flex-end;
justify-content: flex-end;
flex: 0 0 auto;
} }
.terminal-filter { .terminal-filter {
display: grid; display: flex;
gap: 2px; flex-direction: column;
min-width: clamp(220px, 22vw, 320px); gap: 6px;
flex: 0 1 320px; min-width: clamp(280px, 26vw, 420px);
flex: 0 1 clamp(280px, 26vw, 420px);
} }
.terminal-filter-label { .terminal-filter-label {
@ -249,7 +267,7 @@ input {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
min-height: 34px; min-height: 36px;
} }
.terminal-filter-field::before, .terminal-filter-field::before,
@ -283,7 +301,7 @@ input {
.terminal-input { .terminal-input {
min-width: 0; min-width: 0;
width: 100%; width: 100%;
padding: 0 0 6px; padding: 0 0 8px;
border: none; border: none;
border-radius: 0; border-radius: 0;
background: transparent; background: transparent;
@ -1021,10 +1039,17 @@ h3 {
.terminal-topbar { .terminal-topbar {
position: static; position: static;
height: auto; grid-template-columns: minmax(0, 1fr);
flex-direction: column;
align-items: stretch; align-items: stretch;
} }
.terminal-topbar-actions {
justify-content: space-between;
}
.terminal-topbar-controls {
flex: 1 1 auto;
}
} }
@media (max-width: 720px) { @media (max-width: 720px) {
@ -1046,13 +1071,24 @@ h3 {
align-items: flex-start; align-items: flex-start;
} }
.terminal-topbar-controls { .terminal-topbar-actions,
.terminal-topbar-controls,
.terminal-topbar-mode {
width: 100%; width: 100%;
justify-content: flex-start;
}
.terminal-topbar-actions,
.terminal-topbar-controls {
flex-direction: column;
align-items: stretch;
} }
.terminal-filter { .terminal-filter {
width: 100%; width: 100%;
flex-basis: 100%; min-width: 0;
flex-basis: auto;
flex: 1 1 auto;
} }
.terminal-input { .terminal-input {

10
apps/web/app/terminal.tsx
View file

@ -4066,6 +4066,7 @@ export function TerminalAppShell({ children }: { children: ReactNode }) {
<div className="terminal-frame"> <div className="terminal-frame">
<header className="terminal-topbar"> <header className="terminal-topbar">
<FeedStatusBar /> <FeedStatusBar />
<div className="terminal-topbar-actions">
<div className="terminal-topbar-controls"> <div className="terminal-topbar-controls">
<label className="terminal-filter"> <label className="terminal-filter">
<span className="terminal-filter-label">Filter</span> <span className="terminal-filter-label">Filter</span>
@ -4087,10 +4088,17 @@ export function TerminalAppShell({ children }: { children: ReactNode }) {
> >
Clear Clear
</button> </button>
<button className="terminal-button terminal-button-primary" type="button" onClick={state.toggleMode}> </div>
<div className="terminal-topbar-mode">
<button
className="terminal-button terminal-button-primary"
type="button"
onClick={state.toggleMode}
>
{state.mode === "live" ? "Replay" : "Live"} {state.mode === "live" ? "Replay" : "Live"}
</button> </button>
</div> </div>
</div>
</header> </header>
<main className="terminal-content">{children}</main> <main className="terminal-content">{children}</main>