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 42ecf713b..6bbb39afd 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 @@ -48,33 +48,10 @@ } .element-group { - @include flexRow; - .input-wrapper { - @include flexRow; - .format-select { - width: $s-60; - padding: 0; - .dropdown-upwards { - bottom: $s-36; - width: $s-80; - top: unset; - } - } - .size-select { - width: $s-60; - padding: 0; - .dropdown-upwards { - bottom: $s-36; - top: unset; - width: $s-80; - } - } - .suffix-input { - @extend .input-element; - min-width: $s-92; - flex-grow: 1; - } - } + display: grid; + grid-template-columns: repeat(8, 1fr); + column-gap: $s-4; + .action-btn { @extend .button-tertiary; height: $s-32; @@ -85,6 +62,38 @@ } } +.input-wrapper { + grid-column: span 7; + display: grid; + grid-template-columns: subgrid; +} + +.format-select { + grid-column: span 2; + padding: 0; + + .dropdown-upwards { + bottom: $s-36; + width: $s-80; + top: unset; + } +} + +.size-select { + grid-column: span 2; + padding: 0; + .dropdown-upwards { + bottom: $s-36; + top: unset; + width: $s-80; + } +} + +.suffix-input { + grid-column: span 3; + @extend .input-element; +} + .export-btn { @extend .button-secondary; @include tabTitleTipography;