react-miui 0.23.0 → 0.23.2

package/esm/components/layout/header/StickyHeader.module.scss

@@ -0,0 +1,18 @@
+.stickyHeader {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    &__content {
+        flex: 1;
+        overflow: auto;
+
+        &--bottom, &--right {
+            order: 1;
+        }
+    }
+}
+
+.stickyHeader--left, .stickyHeader--right {
+    flex-direction: row;
+}

package/esm/components/layout/list/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAQpD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsBhB,CAAC;AAEH,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AACnE,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAMlD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,GAAG,QAAQ,GAAG;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAMpE,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAUpD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsBhB,CAAC;AAEH,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AACnE,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAMlD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,GAAG,QAAQ,GAAG;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAMpE,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/components/layout/list/Header.js

@@ -1,7 +1,9 @@
 import React from "react";
 import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme.js";
 import { Item, ItemInnerContainerClassName } from "./Item.js";
-const StyledContent = styled("div", {});
+const StyledContent = styled("div", {
+    flex: 1,
+});
 const StyledHeader = styled(Item, {
     paddingTop: dimensionsPxToRem(80),
     paddingBottom: dimensionsPxToRem(40),

package/esm/components/layout/list/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3E,OAAO,EAAE,IAAI,EAAE,2BAA2B,EAAE,MAAM,WAAW,CAAC;AAE9D,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AAExC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,EAAE;IAE9B,UAAU,EAAE,iBAAiB,CAAC,EAAE,CAAC;IAEjC,aAAa,EAAE,iBAAiB,CAAC,EAAE,CAAC;IAEpC,QAAQ,EAAE,WAAW,CAAC,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM;IACb,aAAa,EAAE,WAAW;IAE1B,CAAC,KAAK,2BAA2B,EAAE,CAAC,EAAE;QAClC,SAAS,EAAE,CAAC;KACf;IAED,QAAQ,EAAE;QACN,KAAK,EAAE;YACH,IAAI,EAAE;gBACF,WAAW,EAAE,CAAC;gBACd,YAAY,EAAE,CAAC;aAClB;SACJ;KACJ;CACJ,CAAC,CAAC;AASH,MAAM,MAAM,GAA6D,CAAC,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC1F,OAAO,CACH,oBAAC,YAAY,OAAK,KAAK;QACnB,oBAAC,aAAa,OAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,IAAG,KAAK,CAAC,QAAQ,CAAiB,CACnE,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3E,OAAO,EAAE,IAAI,EAAE,2BAA2B,EAAE,MAAM,WAAW,CAAC;AAE9D,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,EAAE;IAChC,IAAI,EAAE,CAAC;CACV,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,EAAE;IAE9B,UAAU,EAAE,iBAAiB,CAAC,EAAE,CAAC;IAEjC,aAAa,EAAE,iBAAiB,CAAC,EAAE,CAAC;IAEpC,QAAQ,EAAE,WAAW,CAAC,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM;IACb,aAAa,EAAE,WAAW;IAE1B,CAAC,KAAK,2BAA2B,EAAE,CAAC,EAAE;QAClC,SAAS,EAAE,CAAC;KACf;IAED,QAAQ,EAAE;QACN,KAAK,EAAE;YACH,IAAI,EAAE;gBACF,WAAW,EAAE,CAAC;gBACd,YAAY,EAAE,CAAC;aAClB;SACJ;KACJ;CACJ,CAAC,CAAC;AASH,MAAM,MAAM,GAA6D,CAAC,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC1F,OAAO,CACH,oBAAC,YAAY,OAAK,KAAK;QACnB,oBAAC,aAAa,OAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,IAAG,KAAK,CAAC,QAAQ,CAAiB,CACnE,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/components/layout/section/SearchContainer.module.scss

@@ -0,0 +1,3 @@
+.section {
+    margin: 12px;
+}

package/esm/components/layout/section/SectionContainer.js

@@ -2,7 +2,7 @@ import { styled } from "../../../theme.js";
 const SectionContainer = styled("div", {
     background: "$toolbarBg",
     flex: 1,
-    height: "100%",
+    minHeight: "100%",
     display: "flex",
     flexDirection: "column",
     gap: 23,

package/esm/components/layout/section/SectionContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionContainer.js","sourceRoot":"","sources":["../../../../src/components/layout/section/SectionContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,EAAE;IACnC,UAAU,EAAE,YAAY;IACxB,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,EAAE;CACV,CAAC,CAAC;AAEH,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"SectionContainer.js","sourceRoot":"","sources":["../../../../src/components/layout/section/SectionContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,EAAE;IACnC,UAAU,EAAE,YAAY;IACxB,IAAI,EAAE,CAAC;IACP,SAAS,EAAE,MAAM;IACjB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,EAAE;CACV,CAAC,CAAC;AAEH,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/esm/components/layout/table/Table.module.scss

@@ -0,0 +1,30 @@
+.table {
+    border-spacing: 10px;
+    border-collapse: collapse;
+
+    > * > tr > * {
+        text-align: left;
+        padding: 0.75em 0.5em;
+        border-bottom: 1px solid var(--border);
+    }
+
+    > thead > tr:last-child > * {
+        border-bottom: 2px solid var(--border);
+        box-shadow: 0 4px 10px -10px rgba(0, 0, 0, 0.6);
+    }
+}
+
+.striped {
+    > tbody > tr:nth-child(even) > * {
+        background: var(--table-striped-bg);
+    }
+}
+
+.centered {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.wide {
+    width: 100%;
+}

package/esm/components/ui/action/Action.module.scss

@@ -0,0 +1,26 @@
+.action {
+    height: calc(102px / var(--ratio-dimensions));
+    width: calc(102px / var(--ratio-dimensions));
+    border-radius: 100px;
+    border: calc(1px / var(--ratio-border)) solid var(--button-border);
+    background: white;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.a {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.button {
+    border: none;
+    padding: 0;
+    background: none;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(18px / var(--ratio-dimensions));
+}

package/esm/components/ui/action/EqualActions.module.scss

@@ -0,0 +1,11 @@
+.actions {
+    --actions-count: 1;
+    display: inline-grid;
+    grid-template-columns: repeat(var(--actions-count), 1fr);
+    gap: calc(56px / var(--ratio-dimensions));
+}
+
+.vertical {
+    grid-template-columns: auto;
+    grid-template-rows: repeat(var(--actions-count), 1fr);
+}

package/esm/components/ui/directionPad/Pad.module.scss

@@ -0,0 +1,45 @@
+.pad {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 150px;
+    border-radius: 666px;
+    width: 150px;
+    border: 1px solid #aaa;
+    background: white;
+
+    &__line {
+        display: flex;
+    }
+
+    &__button {
+        height: 50px;
+        width: 50px;
+        margin: 0;
+        border-radius: 666px;
+        border: none;
+        display: block;
+        background: none;
+    }
+
+    &__middle {
+        display: block;
+        margin: 0;
+        height: 50px;
+        width: 50px;
+        border: 1px solid #999;
+        box-sizing: border-box;
+        border-radius: 666px;
+        background: none;
+    }
+
+    &__dot {
+        display: block;
+        width: 4px;
+        height: 4px;
+        border-radius: 666px;
+        background: black;
+        margin: auto;
+    }
+}

package/esm/components/ui/drawer/Drawer.module.scss

@@ -0,0 +1,15 @@
+.drawer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: white;
+    z-index: 1;
+
+    transition: transform 300ms;
+}
+
+.content {
+    height: 100%;
+}

package/esm/components/ui/keyValue/KeyValue.module.scss

@@ -0,0 +1,57 @@
+.container {
+    --kv-border-color: var(--header-border);
+    --kv-border: calc(1px / var(--ratio-border)) solid var(--kv-border-color);
+    --kv-background-color: white;
+    --kv-hover-background-color: var(--active-bg);
+    border: 1px solid var(--kv-border-color);
+    background-color: var(--kv-background-color);
+    border-radius: 5px;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.item {
+    display: inline-flex;
+    box-sizing: border-box;
+    padding: 10px;
+    align-items: center;
+    gap: 10px;
+    border: none;
+    background: none;
+}
+
+button.item:hover {
+    background: var(--kv-hover-background-color)
+}
+
+.kv {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.key {
+    font-size: calc(22px / var(--ratio-font));
+    color: var(--sub);
+}
+
+.value {
+    font-size: calc(29px / var(--ratio-font));
+}
+
+.itemNotFirstRow {
+    border-top: var(--kv-border);
+}
+
+.itemNotFirstCol {
+    border-left: var(--kv-border);
+}
+
+.itemLastWithoutFullRow {
+    border-right: var(--kv-border);
+}
+
+.missingItem {
+    border-top: var(--kv-border);
+    border-left: var(--kv-border);
+}

package/esm/components/ui/message/Message.module.scss

@@ -0,0 +1,31 @@
+.container {
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    padding: calc(47px / var(--ratio-dimensions)) calc(83px / var(--ratio-dimensions));
+    font-weight: 500;
+    line-height: 1.25;
+}
+
+.box {
+    border-left: 1px solid var(--border);
+    border-right: 1px solid var(--border);
+    margin: 12px;
+}
+
+.warning {
+    background-color: var(--yellow3);
+    border-color: var(--yellow1);
+    color: var(--yellow2);
+}
+
+.error {
+    background-color: var(--pinky3);
+    border-color: var(--pinky1);
+    color: var(--pinky2);
+}
+
+.info {
+    background-color: var(--blue3);
+    border-color: var(--blue2);
+    color: var(--blue1);
+}

package/esm/components/ui/pop/Pop.module.scss

@@ -0,0 +1,60 @@
+.overlay {
+    position: fixed;
+    background: #0000004c;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 4;
+}
+
+.pop {
+    z-index: 5;
+    position: absolute;
+    background: white;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.li {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+
+    + .li {
+        border-top: 1px solid var(--border);
+    }
+}
+
+.button {
+    border: none;
+    background: white;
+    height: calc(116px / var(--ratio-dimensions));
+    padding: 0 calc(42px / var(--ratio-dimensions));
+    box-sizing: border-box;
+    width: 100%;
+    min-width: calc(460px / var(--ratio-dimensions));
+    text-align: left;
+    color: var(--pop-text);
+    font-size: calc(26px / var(--ratio-font));
+    font-weight: revert;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+        background: var(--active-bg);
+    }
+}
+
+.icon {
+    fill: currentColor;
+    margin-right: calc(42px / var(--ratio-dimensions));
+}
+
+.fakeIcon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin-right: calc(42px / var(--ratio-dimensions));
+}

package/esm/components/ui/stats/Stats.module.scss

@@ -0,0 +1,48 @@
+.stats {
+    --stats-border: 1px solid rgba(255, 255, 255, .15);
+    --stats-bg: rgba(255, 255, 255, .05);
+    --stats-value-color: rgba(255, 255, 255, .9);
+    --stats-label-color: rgba(255, 255, 255, .61);
+
+    display: flex;
+    width: 100%;
+    padding: calc(60px / var(--ratio-dimensions)) 0;
+    margin: 0;
+    border-top: var(--stats-border);
+    background: var(--stats-bg);
+    background-clip: padding-box;
+    list-style-type: none;
+}
+
+.stats-dark {
+    --stats-border: 1px solid rgba(0, 0, 0, .15);
+    --stats-bg: rgba(0, 0, 0, .05);
+    --stats-value-color: rgba(0, 0, 0, .9);
+    --stats-label-color: rgba(0, 0, 0, .61);
+}
+
+.item {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    gap: calc(20px / var(--ratio-dimensions));
+}
+
+.separator {
+    border-left: var(--stats-border);
+}
+
+.label {
+    display: block;
+    color: var(--stats-label-color);
+    font-size: calc(22px / var(--ratio-font));
+}
+
+.value {
+    display: block;
+    color: var(--stats-value-color);
+    font-size: calc(30px / var(--ratio-font));
+}

package/esm/components/ui/tabs/Item.module.scss

@@ -0,0 +1,11 @@
+.button {
+    border: none;
+    padding: 0;
+    font-size: calc(29px / var(--ratio-font));
+    color: var(--selector-text);
+    background: none;
+}
+
+.active {
+    color: var(--selector-active);
+}

package/esm/components/ui/tabs/Selector.module.scss

@@ -0,0 +1,6 @@
+.selector {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    gap: calc(114px / var(--ratio-dimensions));
+}

package/esm/components/ui/toaster/Toaster.module.scss

@@ -0,0 +1,32 @@
+@keyframes show {
+    from {
+        transform: translateY(calc(100% + calc(190px / var(--ratio-dimensions))))
+    }
+}
+
+.toast {
+    position: fixed;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    z-index: 6;
+    left: 50%;
+    transform: translateX(-50%);
+
+    span {
+        background: rgba(56, 50, 46, 0.85);
+        color: #F9F6F2;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.37);
+        border-radius: 12px; // around 22 @TODO use calc here
+        display: inline-block;
+        padding: 1em 1em;
+        animation: show 500ms 1;
+        animation-fill-mode: forwards;
+        margin-bottom: calc(190px / var(--ratio-dimensions));
+    }
+}
+
+.hide {
+    transition: opacity 300ms;
+    opacity: 0;
+}

package/esm/components/utils/Spacer.module.scss

@@ -0,0 +1,3 @@
+.spacer {
+    flex: 1;
+}

package/esm/global.scss

@@ -0,0 +1,95 @@
+// @TODO prefix variable names
+:root {
+    --ratio-dimensions: 3;
+    --ratio-border:     2.666666;
+    // font is calculated from top to bottom
+    --ratio-font:       1.666666;
+
+    --background: white;
+
+    --main-color: #008ad2;
+    --main-color-alt: #006AA9;
+
+    --active-bg: #e7e7e7;
+    --inactive-bg: #d3d3d3;
+    --inactive-dark-bg: #999;
+
+    --toggle-handle-bg: #e0e0e0;
+    --toggle-handle-border: #cdcdcd;
+    --toggle-bg-disabled: #f0f0f0;
+    --toggle-handle-border-disabled: #c29f7d;
+    --toggle-handle-bg-disabled: #deae84;
+
+    --icon: #636363;
+    --border: #d5d5d5;
+    --button-border: #bababa;
+
+    --header-border: #c8c8c9;
+    --header-bg: #efeff0;
+    --header-text: #484848;
+    --text: #323232;
+    --sub: #959595;
+
+    --pop-text: #666;
+
+    --toolbar-border: #ababab;
+    --toolbar-bg: #f8f8f8;
+    --modal-bg: #f7f7f7;
+    --modal-button-bg: #f8f8f8;
+    --modal-button-border: #c2c2c2;
+
+    --input-disabled-bg: #f3f3f3;
+    --input-disabled-text: #959595;
+
+    --choice-bg: #ffffff;
+    --choice-text: #999999;
+    --choice-active-bg: #f3f3f3;
+    --choice-active-text: #313131;
+    --choice-border: #cfcfcf;
+
+    --selector-text: #606060;
+    --selector-active: var(--main-color);
+
+    // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
+    --blue1: #038bf4;
+    --blue2: #b7d6f5;
+    --blue3: #dbe6ff;
+    --orange1: #ff7200;
+    --orange1-darker: #cc5b00;
+    --purple1: #7357e8;
+    --green1: #3ec234;
+    --green1-darker: #38af2f;
+    --pink1: #ff388f;
+    --red1: #ea2700;
+    --yellow1: #ffde9d;
+    --yellow2: #e4a429;
+    --yellow3: #fff5db;
+    --pinky1: #f5c0b7;
+    --pinky2: #e07b67;
+    --pinky3: #ffe1db;
+
+    --grey1: #737373;
+
+    --focus-color: #dcaf00;
+
+    --scrollbars-thumb: var(--grey1);
+    --scrollbars-bg: transparent;
+
+    --table-striped-bg: #fafafa;
+}
+
+*:focus {
+    outline: none!important;
+}
+
+*:focus-visible:focus-visible {
+    outline: none!important;
+    border-color: var(--focus-color);
+    background-color: var(--focus-bg-set);
+}
+
+
+body {
+    font-size: 15px;
+    color: var(--text);
+}

package/esm/scrollbars.scss

@@ -0,0 +1,22 @@
+.miui-scrollbars {
+    overflow-y: auto;
+    scrollbar-color: var(--scrollbars-thumb) var(--scrollbars-bg);
+    scrollbar-width: thin !important;
+
+    &::-webkit-scrollbar {
+        width: 6px;
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb:vertical {
+        background: var(--scrollbars-thumb);
+        background-clip: padding-box;
+        border: 2px solid var(--scrollbars-bg);
+        min-height: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb:vertical:active {
+        background: var(--scrollbars-thumb);
+        border: 2px solid var(--scrollbars-bg);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.23.0",
+  "version": "0.23.2",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {

package/src/components/layout/list/Header.tsx

@@ -6,7 +6,9 @@ import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme.js";
 
 import { Item, ItemInnerContainerClassName } from "./Item.js";
 
-const StyledContent = styled("div", {});
+const StyledContent = styled("div", {
+    flex: 1,
+});
 
 const StyledHeader = styled(Item, {
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers

package/src/components/layout/section/SectionContainer.tsx

@@ -3,7 +3,7 @@ import { styled } from "../../../theme.js";
 const SectionContainer = styled("div", {
     background: "$toolbarBg",
     flex: 1,
-    height: "100%",
+    minHeight: "100%",
     display: "flex",
     flexDirection: "column",
     gap: 23,