dont overflow screen in mobile

TeemuKoivisto · Mar 29, 2024 · 258bc92 · 258bc92
1 parent 6aa98fd
commit 258bc92
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 5 deletions.
diff --git a/packages/client/src/components/play/ScoreOptions.svelte b/packages/client/src/components/play/ScoreOptions.svelte
@@ -100,7 +100,7 @@
     <Icon icon={restore} width={16} />
   </button>
   <div class="options" class:hidden={$hidden}>
-    <div class="flex flex-col h-full">
+    <div class="range flex flex-col h-full">
       <label class="font-bold" for="range_min">Range</label>
       <div class="my-1 flex w-full">
         <input
@@ -170,9 +170,6 @@
     gap: 0.5rem;
     grid-template-columns: 1fr;
     grid-template-rows: auto;
-    @media (width <= 475px) {
-      grid-template-columns: 1fr 1fr;
-    }
     &.hidden {
       display: none;
     }

diff --git a/packages/client/src/components/score/Score.svelte b/packages/client/src/components/score/Score.svelte
@@ -71,7 +71,7 @@
 
   function init() {
     renderer = new Renderer(outputEl, Renderer.Backends.SVG)
-    renderer.resize(732, 360)
+    renderer.resize(Math.min(window.innerWidth - 16, 732), 360)
     ctx = renderer.getContext()
     ctx.scale(2.0, 2.0)
     // console.log('ctx', ctx)