diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss index addc9bbff9..9c2e5733d7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss @@ -7,7 +7,13 @@ @use "refactor/common-refactor.scss" as deprecated; .element-set { - margin: 0; + display: grid; + grid-template-columns: repeat(8, var(--sp-xxxl)); + column-gap: var(--sp-xs); +} + +.element-title { + grid-column: span 8; } .title-spacing-blur { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss index 85d92a6ab2..46f0793a15 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss @@ -7,7 +7,13 @@ @use "refactor/common-refactor.scss" as deprecated; .element-set { - margin: 0; + display: grid; + grid-template-columns: repeat(8, var(--sp-xxxl)); + column-gap: var(--sp-xs); +} + +.element-title { + grid-column: span 8; } .title-spacing-selected-colors { @@ -25,6 +31,7 @@ } .element-content { + grid-column: span 8; @include deprecated.flexColumn; margin-bottom: deprecated.$s-8; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss index 0a1515b931..2d6cc25313 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss @@ -7,7 +7,13 @@ @use "refactor/common-refactor.scss" as deprecated; .element-set { - margin: 0; + display: grid; + grid-template-columns: repeat(8, var(--sp-xxxl)); + column-gap: var(--sp-xs); +} + +.element-title { + grid-column: span 8; } .title-spacing-export { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs index d1783aed29..326b5efa4a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs @@ -316,16 +316,17 @@ #(st/emit! (dw/add-frame-grid id)))] [:div {:class (stl/css :element-set)} - [:> title-bar* {:collapsable has-frame-grids? - :collapsed (not open?) - :on-collapsed toggle-content - :class (stl/css-case :title-spacing-board-grid (not has-frame-grids?)) - :title (tr "workspace.options.guides.title")} + [:div {:class (stl/css :element-title)} + [:> title-bar* {:collapsable has-frame-grids? + :collapsed (not open?) + :on-collapsed toggle-content + :class (stl/css-case :title-spacing-board-grid (not has-frame-grids?)) + :title (tr "workspace.options.guides.title")} - [:> icon-button* {:variant "ghost" - :aria-label (tr "workspace.options.guides.add-guide") - :on-click handle-create-grid - :icon i/add}]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.guides.add-guide") + :on-click handle-create-grid + :icon i/add}]]] (when (and open? (seq frame-grids)) [:div {:class (stl/css :element-set-content)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss index 85b2b54649..f19955d198 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss @@ -7,7 +7,13 @@ @use "refactor/common-refactor.scss" as deprecated; .element-set { - margin: 0; + display: grid; + grid-template-columns: repeat(8, var(--sp-xxxl)); + column-gap: var(--sp-xs); +} + +.element-title { + grid-column: span 8; } .title-spacing-board-grid { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss index fb1ecf38c9..5264a1e757 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss @@ -12,10 +12,21 @@ gap: deprecated.$s-16; } +.grid-cell-menu { + display: grid; + grid-template-columns: repeat(8, var(--sp-xxxl)); + column-gap: var(--sp-xs); +} + .grid-cell-menu-title { + grid-column: span 8; font-size: deprecated.$fs-11; } +.grid-cell-menu-container { + grid-column: span 8; +} + .row { @include deprecated.flexRow; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss index 7fdf2dd4af..66f6d1a0b8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss @@ -7,8 +7,13 @@ @use "refactor/common-refactor.scss" as deprecated; .element-set { - margin: 0; + display: grid; + grid-template-columns: repeat(8, var(--sp-xxxl)); + column-gap: var(--sp-xs); + .element-title { + grid-column: span 8; + .title-spacing-layout { padding-left: deprecated.$s-2; margin: 0; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss index f27999ddb2..6090b4a2ed 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss @@ -7,14 +7,17 @@ @use "refactor/common-refactor.scss" as deprecated; .element-set { - margin: 0; + display: grid; + grid-template-columns: repeat(8, var(--sp-xxxl)); + column-gap: var(--sp-xs); } .element-title { - margin: 0; + grid-column: span 8; } .element-content { + grid-column: span 8; @include deprecated.flexColumn; margin-top: deprecated.$s-4; }