diff --git a/src/client/lazy-app/Compress/Output/style.css b/src/client/lazy-app/Compress/Output/style.css index 60ef9498..fba0be15 100644 --- a/src/client/lazy-app/Compress/Output/style.css +++ b/src/client/lazy-app/Compress/Output/style.css @@ -1,5 +1,5 @@ .output { - composes: abs-fill from global; + display: contents; &::before { content: ''; diff --git a/src/client/lazy-app/Compress/index.tsx b/src/client/lazy-app/Compress/index.tsx index a08d7b6b..936c28ad 100644 --- a/src/client/lazy-app/Compress/index.tsx +++ b/src/client/lazy-app/Compress/index.tsx @@ -889,11 +889,11 @@ export default class Compress extends Component { ) : ( [ -
+
{options[0]} {results[0]}
, -
+
{options[1]} {results[1]}
, diff --git a/src/client/lazy-app/Compress/style.css b/src/client/lazy-app/Compress/style.css index 620a53ce..36fd189c 100644 --- a/src/client/lazy-app/Compress/style.css +++ b/src/client/lazy-app/Compress/style.css @@ -8,8 +8,11 @@ grid-template-rows: 1fr auto; @media (min-width: 600px) { - grid-template-columns: 1fr auto; - grid-template-rows: 100%; + grid-template-rows: max-content 1fr; + grid-template-columns: max-content 1fr max-content; + grid-template-areas: + 'header header header' + 'optsLeft viewportOpts optsRight'; } } @@ -36,6 +39,16 @@ } } +.options-1 { + composes: options; + grid-area: optsLeft; +} + +.options-2 { + composes: options; + grid-area: optsRight; +} + .multi-panel { position: relative; display: flex; @@ -76,10 +89,10 @@ .back { composes: unbutton from global; - position: absolute; - top: var(--dist); - left: var(--dist); - --dist: 14px; + position: relative; + grid-area: header; + margin: 14px; + justify-self: start; & > svg { width: 58px;