Skip to content

fix(web): align FlowChat layout and unify settings page styling #1864

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bobleer merged 1 commit into from
Jul 29, 2026
Merged

fix(web): align FlowChat layout and unify settings page styling #1864

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@

&.is-active {
color: var(--color-text-primary);
background: var(--element-bg-soft);
background: transparent;
}

&.is-editing {
Expand Down Expand Up @@ -187,10 +187,13 @@
}

&.is-btw-child {
&:hover,
&.is-active {
&:hover {
background: var(--element-bg-soft);
}

&.is-active {
background: transparent;
}
}
}

Expand Down Expand Up @@ -890,8 +893,8 @@
}

&.is-active {
background: var(--element-bg-medium);
box-shadow: inset 2px 0 0 color-mix(in srgb, var(--color-accent-500) 76%, transparent);
background: transparent;
box-shadow: none;
}
}

Expand Down
10 changes: 5 additions & 5 deletions src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@
overflow: hidden;
border-radius: 6px;
color: var(--color-text-primary);
background: var(--color-bg-primary);
background: transparent;
transition: color $motion-fast $easing-standard,
background $motion-fast $easing-standard,
box-shadow $motion-fast $easing-standard;
Expand Down Expand Up @@ -1063,7 +1063,7 @@
max-width: 100%;
border-radius: 6px;
color: var(--color-text-secondary);
background: var(--color-bg-primary);
background: transparent;
overflow: hidden;
transition: color $motion-fast $easing-standard,
background $motion-fast $easing-standard,
Expand Down Expand Up @@ -1360,8 +1360,8 @@

&__workspace-item.is-active &__workspace-item-card,
&__assistant-item.is-active &__assistant-item-card {
background: var(--element-bg-medium);
box-shadow: inset 2px 0 0 color-mix(in srgb, var(--color-accent-500) 76%, transparent);
background: transparent;
box-shadow: none;
}

&__workspace-item-card:active,
Expand Down Expand Up @@ -1438,7 +1438,7 @@

.bitfun-nav-panel__workspace-item.is-active .bitfun-nav-panel__workspace-item-card:hover,
.bitfun-nav-panel__assistant-item.is-active .bitfun-nav-panel__assistant-item-card:hover {
background: var(--element-bg-medium);
background: transparent;
}
}

Expand Down
6 changes: 3 additions & 3 deletions src/web-ui/src/app/scenes/settings/SettingsNav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@

&.is-active {
color: var(--color-text-primary);
background: var(--element-bg-soft);
background: transparent;
font-weight: 500;
}

Expand Down Expand Up @@ -256,9 +256,9 @@

&.is-active {
color: var(--color-text-primary);
background: color-mix(in srgb, var(--color-accent-500) 10%, var(--element-bg-soft));
background: transparent;
font-weight: 500;
box-shadow: inset 2px 0 0 var(--color-accent-500);
box-shadow: none;
}

&:focus-visible {
Expand Down
4 changes: 1 addition & 3 deletions src/web-ui/src/flow_chat/components/ChatInput.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -705,9 +705,7 @@
}

&:focus-within {
border-color: color-mix(in srgb, var(--color-accent-500) 46%, var(--border-base));
box-shadow:
0 0 0 2px color-mix(in srgb, var(--color-accent-500) 12%, transparent),
box-shadow:
0 12px 30px rgba(var(--color-static-black-rgb), 0.28),
inset 0 1px 0 var(--color-overlay-white-12);
}
Expand Down
5 changes: 5 additions & 0 deletions src/web-ui/src/flow_chat/components/modern/ExploreRegion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@
.explore-region {
position: relative;
overflow: hidden;
/* Same column box as .model-round-item so the collapse header (`>`) and the
* round's body text share one leading edge. */
box-sizing: border-box;
width: min(100%, 900px);
margin: 0 auto;
padding: 0 var(--flowchat-content-inline-pad);

@media (max-width: 768px) {
Expand Down
43 changes: 14 additions & 29 deletions src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@

.user-message-item {
box-sizing: border-box;
width: fit-content;
min-width: min(
18rem,
calc(100% - var(--flowchat-content-inline-pad) - var(--flowchat-content-inline-pad))
);
max-width: min(78%, 52rem);
/*
* Fills the reading column instead of hugging its text: the bubble shares the
* exact leading and trailing edge as the tool-call bars and body text below
* it, so a turn reads as one column rather than a right-floating chat bubble.
*/
width: auto;
padding: 0.46rem 0.68rem;
background: color-mix(in srgb, var(--element-bg-medium) 90%, var(--color-bg-scene));
border: 1px solid color-mix(in srgb, var(--border-base) 72%, transparent);
Expand All @@ -20,7 +20,7 @@
0.06rem
var(--flowchat-content-inline-pad)
var(--flowchat-turn-gap)
auto;
var(--flowchat-content-inline-pad);
box-shadow:
0 1px 0 color-mix(in srgb, var(--color-static-white) 5%, transparent) inset,
0 2px 8px var(--color-overlay-black-08);
Expand Down Expand Up @@ -61,18 +61,7 @@

// Responsive: reduce margins on smaller screens.
@media (max-width: 768px) {
min-width: min(
14rem,
calc(
100% - var(--flowchat-content-inline-pad-mobile) -
var(--flowchat-content-inline-pad-mobile)
)
);
max-width: calc(
100% - var(--flowchat-content-inline-pad-mobile) -
var(--flowchat-content-inline-pad-mobile)
);
margin-left: auto;
margin-left: var(--flowchat-content-inline-pad-mobile);
margin-right: var(--flowchat-content-inline-pad-mobile);
}
}
Expand Down Expand Up @@ -198,11 +187,6 @@
border: none;
box-shadow: none;
padding-left: 0.35rem;
width: auto;
min-width: 0;
max-width: none;
margin-left: var(--flowchat-content-inline-pad);
margin-right: var(--flowchat-content-inline-pad);

.user-message-item__main {
align-items: flex-start;
Expand Down Expand Up @@ -517,14 +501,15 @@
.user-message-item__images {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 4px;
gap: 6px;
margin-top: 6px;
}

.user-message-item__image-thumb {
width: 120px;
height: 120px;
border-radius: 6px;
/* Attachment-sized, not a hero image: the text stays the primary content. */
width: 72px;
height: 72px;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
border: 1px solid var(--border-base);
Expand Down
5 changes: 5 additions & 0 deletions src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@

.virtual-item-wrapper {
width: 100%;
/*
* Single reading column shared by every item type (model rounds, explore
* groups, user messages, notices). Matches ChatInput's 900px so headers,
* `>` collapse rows, and bubbles all sit on the same leading edge.
*/
max-width: 900px;
margin: 0 auto;
box-sizing: border-box;
Expand Down
9 changes: 1 addition & 8 deletions src/web-ui/src/infrastructure/config/components/BasicsConfig.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,6 @@
gap: 16px;
}

&__select-wrapper {
width: 100%;
}

&__path-row {
display: flex;
align-items: stretch;
Expand Down Expand Up @@ -86,10 +82,6 @@
gap: $size-gap-6;
}

&__select-wrapper {
width: 100%;
}

&__shell-option,
&__shell-value {
display: flex;
Expand Down Expand Up @@ -123,6 +115,7 @@
}

&__no-shells {
width: 100%;
padding: 12px 16px;
border: 1px dashed var(--border-base);
border-radius: $size-radius-sm;
Expand Down
72 changes: 32 additions & 40 deletions src/web-ui/src/infrastructure/config/components/BasicsConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -525,14 +525,12 @@ function BasicsLoggingSection() {
description={t('logging.level.description')}
align="center"
>
<div className="bitfun-logging-config__select-wrapper">
<Select
value={configLevel}
onChange={(v) => handleLevelChange(v as string)}
options={levelOptions}
disabled={saving}
/>
</div>
<Select
value={configLevel}
onChange={(v) => handleLevelChange(v as string)}
options={levelOptions}
disabled={saving}
/>
</ConfigPageRow>
<ConfigPageRow
label={t('logging.sensitiveDiagnostics.label')}
Expand Down Expand Up @@ -782,37 +780,33 @@ function BasicsTerminalSection() {
description={t('terminal.controls.description')}
align="center"
>
<div className="bitfun-terminal-config__select-wrapper">
{availableShells.length > 0 ? (
<Select
value={selectedShellValue}
onChange={(v) => handleShellChange(v as string)}
options={shellOptions}
renderOption={renderShellOption}
renderValue={renderShellValue}
placeholder={t('terminal.controls.placeholder')}
disabled={saving}
/>
) : (
<div className="bitfun-terminal-config__no-shells">{t('terminal.controls.noShells')}</div>
)}
</div>
{availableShells.length > 0 ? (
<Select
value={selectedShellValue}
onChange={(v) => handleShellChange(v as string)}
options={shellOptions}
renderOption={renderShellOption}
renderValue={renderShellValue}
placeholder={t('terminal.controls.placeholder')}
disabled={saving}
/>
) : (
<div className="bitfun-terminal-config__no-shells">{t('terminal.controls.noShells')}</div>
)}
</ConfigPageRow>

<ConfigPageRow
label={t('terminal.panelPosition.label')}
description={t('terminal.panelPosition.description')}
align="center"
>
<div className="bitfun-terminal-config__select-wrapper">
<Select
value={terminalPanelPosition}
onChange={(v) => handleTerminalPanelPositionChange(v as TerminalPanelPosition)}
options={terminalPanelPositionOptions}
placeholder={t('terminal.panelPosition.placeholder')}
disabled={saving}
/>
</div>
<Select
value={terminalPanelPosition}
onChange={(v) => handleTerminalPanelPositionChange(v as TerminalPanelPosition)}
options={terminalPanelPositionOptions}
placeholder={t('terminal.panelPosition.placeholder')}
disabled={saving}
/>
</ConfigPageRow>
</ConfigPageSection>
</div>
Expand Down Expand Up @@ -903,14 +897,12 @@ function BasicsWindowBehaviorSection() {
description={t('windowBehavior.closeButtonDescription')}
align="center"
>
<div className="bitfun-window-behavior-config__select-wrapper">
<Select
value={behavior}
onChange={(v) => { void handleChange(v as string); }}
options={behaviorOptions}
disabled={saving}
/>
</div>
<Select
value={behavior}
onChange={(v) => { void handleChange(v as string); }}
options={behaviorOptions}
disabled={saving}
/>
</ConfigPageRow>
</ConfigPageSection>
</div>
Expand Down
Loading