diff --git a/app/src/assets/editor.less b/app/src/assets/editor.less index ab0630fe..84c23bad 100644 --- a/app/src/assets/editor.less +++ b/app/src/assets/editor.less @@ -85,9 +85,10 @@ } .editor-toolbar { - display: flex; - flex-direction: row; + display: grid; + grid-auto-flow: column; align-items: flex-end; gap: 4px; - margin: 4px 0; + width: max-content; + margin: 4px 0 4px auto; } diff --git a/app/src/assets/generation.less b/app/src/assets/generation.less index 224984c6..ef99dd99 100644 --- a/app/src/assets/generation.less +++ b/app/src/assets/generation.less @@ -44,7 +44,6 @@ align-items: center; flex-grow: 1; padding: 15vh 0; - gap: 2rem; .box { display: flex; @@ -148,7 +147,7 @@ display: flex; flex-direction: row; width: 80%; - margin: 0 auto; + margin: 2rem auto; max-width: 680px; .input { diff --git a/app/src/assets/home.less b/app/src/assets/home.less index cfdfd8ad..ba3edb0e 100644 --- a/app/src/assets/home.less +++ b/app/src/assets/home.less @@ -254,7 +254,15 @@ touch-action: pan-y; padding: 18px; scrollbar-width: thin; - gap: 8px; + + // using margin instead of gap to avoid browser compatibility issues + & > * { + margin-bottom: 8px; + + &:last-child { + margin-bottom: 0; + } + } &::-webkit-scrollbar { width: 6px; @@ -325,7 +333,7 @@ } .input-options { - margin: 16px auto 2px; + margin: 6px auto 2px; display: flex; flex-direction: row; align-items: center; diff --git a/app/src/assets/navbar.less b/app/src/assets/navbar.less index 11aff5ab..873a71b1 100644 --- a/app/src/assets/navbar.less +++ b/app/src/assets/navbar.less @@ -17,7 +17,14 @@ flex-direction: row; align-content: center; vertical-align: center; - gap: 10px; + + & > * { + margin-right: 8px; + + &:last-child { + margin-right: 0; + } + } } .logo { diff --git a/app/src/routes/Quota.tsx b/app/src/routes/Quota.tsx index 756c6b01..a5f3976b 100644 --- a/app/src/routes/Quota.tsx +++ b/app/src/routes/Quota.tsx @@ -319,7 +319,7 @@ function Quota() {
{t("buy.tip")}