dexter/BTerminal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(v3): content-driven sidebar width and remaining px-to-rem conversions

Browse source 
Sidebar panel now uses width: max-content with per-tab min-width (22em)
instead of fixed 28em. Changed overflow: hidden to overflow-y: auto on
panel + panel-content so content drives parent width. Converted remaining
px values in SettingsTab, DocsTab to rem/em per rule 18.
This commit is contained in:
Hibryda 2026-03-08 01:13:43 +01:00
parent 3ecc4f02d1
commit 97860c3db1
4 changed files with 13 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

7
v2/src/App.svelte
View file

@ -203,13 +203,14 @@
} }
.sidebar-panel { .sidebar-panel {
width: 28em; width: max-content;
min-width: 16em;
max-width: 50%; max-width: 50%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--ctp-base); background: var(--ctp-base);
border-right: 1px solid var(--ctp-surface1); border-right: 1px solid var(--ctp-surface1);
overflow: hidden; overflow-y: auto;
flex-shrink: 0; flex-shrink: 0;
} }
@ -249,7 +250,7 @@
.panel-content { .panel-content {
flex: 1; flex: 1;
overflow: hidden; overflow-y: auto;
} }
.workspace { .workspace {

1
v2/src/lib/components/Workspace/ContextTab.svelte
View file

@ -10,5 +10,6 @@
.context-tab { .context-tab {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
min-width: 22em;
} }
</style> </style>

11
v2/src/lib/components/Workspace/DocsTab.svelte
View file

@ -80,22 +80,23 @@
display: flex; display: flex;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
min-width: 22em;
} }
.file-picker { .file-picker {
width: 220px; width: 14em;
flex-shrink: 0; flex-shrink: 0;
background: var(--ctp-mantle); background: var(--ctp-mantle);
border-right: 1px solid var(--ctp-surface0); border-right: 1px solid var(--ctp-surface0);
overflow-y: auto; overflow-y: auto;
padding: 8px 0; padding: 0.5rem 0;
} }
.picker-title { .picker-title {
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
color: var(--ctp-subtext0); color: var(--ctp-subtext0);
padding: 4px 12px 8px; padding: 0.25rem 0.75rem 0.5rem;
margin: 0; margin: 0;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
@ -110,7 +111,7 @@
.file-btn { .file-btn {
display: block; display: block;
width: 100%; width: 100%;
padding: 5px 12px; padding: 0.3rem 0.75rem;
background: transparent; background: transparent;
border: none; border: none;
color: var(--ctp-subtext0); color: var(--ctp-subtext0);
@ -150,7 +151,7 @@
justify-content: center; justify-content: center;
color: var(--ctp-overlay0); color: var(--ctp-overlay0);
font-size: 0.85rem; font-size: 0.85rem;
padding: 20px; padding: 1.25rem;
} }
.no-selection { .no-selection {

3
v2/src/lib/components/Workspace/SettingsTab.svelte
View file

@ -478,9 +478,10 @@
<style> <style>
.settings-tab { .settings-tab {
padding: 12px 16px; padding: 0.75rem 1rem;
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
min-width: 22em;
} }
h2 { h2 {