style: improve top screen rendering on desktop

2023-02-13 19:53:02 +01:00
parent a29d11f385
commit a1bd44ffb3
2 changed files with 4 additions and 1 deletions
--- a/src/lib/QuickSetting.svelte
+++ b/src/lib/QuickSetting.svelte
@@ -86,7 +86,7 @@
     font-size: 1.2em;
     transition: background-color;
     transition-duration: 250ms;
-     font-size: calc(15px + 0.390625vw);
+     font-size: min(calc(15px + 0.390625vw), 18.5px);
 }

 button.enabled {
--- a/src/lib/TopScreen.svelte
+++ b/src/lib/TopScreen.svelte
@@ -129,8 +129,10 @@
 }

 :global(.container:not(.mobile)) .settings {
+     max-width: 500px;
     flex-grow: 1;
     flex-basis: 0;
+     margin-right: 8px;
 }

 :global(.container.mobile) .contents {
@@ -156,6 +158,7 @@
     :global(.container:not(.mobile)) & {
 	 height: 150px;

+
 	 @extend .mt-18;
     }
 }