diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs index f5f04bb7a..14b091461 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs @@ -573,7 +573,9 @@ [:span {:class (stl/css :rectangle)}]]]] ;; Overlay click outside - [:div {:class (stl/css :property-row)} + + [:ul {:class (stl/css :property-list)} + [:li {:class (stl/css :property-row)} [:div {:class (stl/css :checkbox-option)} [:label {:for (str "close-" index) :class (stl/css-case :global/checked close-click-outside?)} @@ -587,7 +589,7 @@ :on-change change-close-click-outside}]]]] ;; Overlay background - [:div {:class (stl/css :property-row)} + [:li {:class (stl/css :property-row)} [:div {:class (stl/css :checkbox-option)} [:label {:for (str "background-" index) :class (stl/css-case :global/checked background-overlay?)} @@ -598,7 +600,7 @@ [:input {:type "checkbox" :id (str "background-" index) :checked background-overlay? - :on-change change-background-overlay}]]]]]) + :on-change change-background-overlay}]]]]]]) (when (ctsi/has-animation? interaction) [:* diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss index 09c1b4207..aa3989fe9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss @@ -104,8 +104,17 @@ @include flexColumn; } +.property-list { + list-style: none; + margin: 0; + display: grid; + row-gap: $s-16; + margin-block: calc(#{$s-16} - #{$s-4}); +} + .property-row { @extend .attr-row; + height: auto; &.big-row { height: 100%; } @@ -136,10 +145,7 @@ @extend .input-element; grid-area: content; } - .checkbox-option { - @extend .input-checkbox; - grid-area: content; - } + .position-btns-wrapper { grid-area: content; display: grid; @@ -216,6 +222,14 @@ } } } +.checkbox-option { + @extend .input-checkbox; + grid-area: content; + line-height: 1.2; + label { + align-items: start; + } +} .interactions-summary { @extend .asset-element;