Make UI usable on a narrower viewport

Changes

3 changed files (+24/-7)

• src/elements/x-app-layout.css
  • @@ -11,19 +11,38 @@
    :host { position: fixed; inset: 0; - display: flex; + display: grid; + grid-template-rows: minmax(0, 1fr) 50dvh; + grid-template-columns: minmax(0, 1fr); + grid-template-areas: "preview" "parameters"; font-family: "Inter", sans-serif; } ::slotted([slot="preview"]) { - flex-grow: 1; - flex-shrink: 1; + grid-area: preview; } ::slotted([slot="parameters"]) { + grid-area: parameters; position: relative; - width: min(20rem, 30vw); + border: none; + border-top: 1px solid ButtonFace; + + box-shadow: 0 0 3px oklch(0% 0 0deg / 0.2); z-index: 100; + } + + @media screen and (min-width: 980px) { + :host { + grid-template-columns: minmax(0, 1fr) min(20rem, 30vw); + grid-template-rows: minmax(0, 1fr); + grid-template-areas: "preview parameters"; + } + + ::slotted([slot="parameters"]) { + border: none; + border-inline-start: 1px solid ButtonFace; + } } @media print {
• src/elements/x-panel.css
  • @@ -11,9 +11,7 @@
    :host { display: block; border: none; - border-inline-start: 1px solid ButtonFace; background-color: Canvas; - box-shadow: 0 0 3px oklch(0% 0 0deg / 0.2); overflow-y: auto; }
• src/elements/x-preview.css
  • @@ -67,7 +67,7 @@ }
    .reset { position: absolute; - bottom: 5px; + top: 5px; left: 5px; font-family: "Inter", sans-serif;