Skip to content

Commit 10855b8

Browse files
MarkoVcodeclaude
andcommitted
Fix accordion layout to properly release space when channels collapse
Replace CSS grid with flexbox layout to allow collapsed channels to release horizontal space for other channels to expand into. **Problems Fixed:** - Collapsed channels now shrink to 40px width (was taking full grid column) - Other channels expand to fill freed space horizontally - Collapsed channels no longer extend beyond window boundaries - Proper text overflow handling with ellipsis **Layout Changes:** - Changed from CSS Grid to Flexbox with flex-wrap - Expanded channels: flex: 1 1 300px (grow, shrink, 300px basis) - Collapsed channels: flex: 0 0 40px (fixed 40px width) - Min-width enforced with !important to override flex defaults - Proper overflow handling on all nested elements **Behavior:** - When channel collapses: releases space, other channels grow - When channel expands: takes minimum 300px, others adjust - Multiple collapsed channels stack vertically on the left - Responsive wrapping when insufficient horizontal space 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 9a86055 commit 10855b8

File tree

1 file changed

+18
-6
lines changed
  • benchmesh-serial-service/frontend/src/ui/workbench/EditorArea

1 file changed

+18
-6
lines changed

benchmesh-serial-service/frontend/src/ui/workbench/EditorArea/editor.css

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -171,14 +171,18 @@
171171

172172
/* Channel grid layout */
173173
.channels-grid {
174-
display: grid;
175-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
174+
display: flex;
175+
flex-wrap: wrap;
176176
gap: 16px;
177+
align-items: stretch;
177178
}
178179

179180
.channel-column {
180181
display: flex;
181182
flex-direction: column;
183+
flex: 1 1 300px;
184+
min-width: 300px;
185+
max-width: 100%;
182186
}
183187

184188
/* Channel sub-header */
@@ -240,32 +244,39 @@
240244

241245
/* Collapsed channel state */
242246
.channel-column--collapsed {
243-
flex: 0 0 auto !important;
244-
min-width: 40px;
245-
max-width: 40px;
247+
flex: 0 0 40px !important;
248+
min-width: 40px !important;
249+
max-width: 40px !important;
246250
}
247251

248252
.channel-column--collapsed .channel-subheader {
249253
writing-mode: vertical-lr;
250254
transform: rotate(180deg);
251255
height: 100%;
252-
width: 40px;
256+
width: 100%;
253257
border-bottom: none;
254258
border-right: 1px solid var(--editor-border);
255259
margin-bottom: 0;
256260
padding-bottom: 0;
257261
padding-right: 3px;
262+
padding-left: 3px;
258263
flex-direction: row-reverse;
264+
overflow: hidden;
259265
}
260266

261267
.channel-column--collapsed .channel-subheader-content {
262268
display: flex;
263269
flex-direction: column;
264270
gap: 4px;
271+
overflow: hidden;
272+
flex: 1;
273+
min-height: 0;
265274
}
266275

267276
.channel-column--collapsed .channel-label {
268277
white-space: nowrap;
278+
overflow: hidden;
279+
text-overflow: ellipsis;
269280
}
270281

271282
.channel-column--collapsed .channel-resource-path {
@@ -274,6 +285,7 @@
274285

275286
.channel-column--collapsed .channel-collapse-toggle {
276287
transform: rotate(90deg);
288+
flex-shrink: 0;
277289
}
278290

279291
.mosaic-instrument__footer {

0 commit comments

Comments
 (0)