MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update section component grid column styles to explicit widths to prevent issues with dynamic resizing and overflow

This commit is contained in:
Andrew Kingston 2023-09-22 08:48:34 +01:00
parent 7db7159b4c
commit 69c688a03e
1 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/client/src/components/app/Section.svelte
View File

@ -47,28 +47,29 @@
<style>
div {
display: grid;
grid-gap: 16px;
--gap: 16px;
grid-gap: var(--gap);
}
.mainSidebar {
grid-template-columns: 3fr 1fr;
grid-template-columns:
calc((100% - var(--gap)) / 4 * 3) /* 75% */
calc((100% - var(--gap)) / 4); /* 25% */
}
.sidebarMain {
grid-template-columns: 1fr 3fr;
}
.oneColumn {
grid-template-columns: 1fr;
}
.twoColumns {
grid-template-columns: 1fr 1fr;
}
.threeColumns {
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns:
calc((100% - var(--gap)) / 4) /* 25% */
calc((100% - var(--gap)) / 4 * 3); /* 75% */
}
.oneColumn,
.columns-1 {
grid-template-columns: 1fr;
}
.twoColumns,
.columns-2 {
grid-template-columns: 1fr 1fr;
grid-template-columns: repeat(2, calc((100% - var(--gap)) / 2));
}
.threeColumns {
grid-template-columns: repeat(3, calc((100% - var(--gap)) / 3));
}
.placeholder {
border: 2px dashed var(--spectrum-global-color-gray-600);