Skip to content

Commit 63eeabe

Browse files
fix: Improve catalog search layout to fit within palette sidebar width
- Added text wrapping for long node names using word-break and overflow-wrap - Implemented flexbox layout for proper alignment - Vertically centered Install buttons for better multi-line text alignment - Increased label margin to prevent overlap with buttons - Set minimum height for consistent spacing Co-authored-by: Dimitrie Hoekstra <[email protected]>
1 parent 87e922a commit 63eeabe

File tree

1 file changed

+13
-2
lines changed
  • packages/node_modules/@node-red/editor-client/src/sass

1 file changed

+13
-2
lines changed

packages/node_modules/@node-red/editor-client/src/sass/palette.scss

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -366,30 +366,41 @@
366366
border-style: dashed;
367367
position: relative;
368368
padding-right: 35px;
369+
min-height: 30px;
370+
display: flex;
371+
align-items: center;
369372

370373
&:hover {
371374
opacity: 1;
372375
border-style: solid;
373376
}
374377

375378
.red-ui-palette-label {
376-
margin-right: 35px;
379+
margin-right: 45px;
377380
margin-left: 5px;
378381
font-size: 11px;
382+
word-break: break-word;
383+
overflow-wrap: break-word;
384+
white-space: normal;
385+
line-height: 1.3;
386+
flex: 1;
387+
text-align: left;
379388
}
380389
}
381390

382391
.red-ui-palette-node-install-btn {
383392
position: absolute;
384393
right: 3px;
385-
top: 3px;
394+
top: 50%;
395+
transform: translateY(-50%);
386396
padding: 2px 6px;
387397
font-size: 10px;
388398
background: var(--red-ui-button-background);
389399
color: var(--red-ui-button-color);
390400
border: 1px solid var(--red-ui-button-border-color);
391401
border-radius: 3px;
392402
cursor: pointer;
403+
white-space: nowrap;
393404

394405
&:hover {
395406
background: var(--red-ui-button-background-hover);

0 commit comments

Comments
 (0)