fix: make panes scrollable (#14)

Sidebar panes can now be scrolled if the content inside is too long.

src/components/controls/Controls.module.scss

@@ -131,8 +131,12 @@
 }
 
 .value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+
   &::before {
     content: attr(data-value);
+    white-space: nowrap;
   }
 
   &[data-full]:hover::before {

src/components/sidebar/Properties.tsx

@@ -67,6 +67,11 @@ function YesNodeSelected({node}: {node: Node}) {
           })`;
         }
 
+        // Temporary padding and margin support
+        if (typeof value === 'object' && 'left' in value) {
+          value = `${value.top}, ${value.right}, ${value.bottom}, ${value.left}`;
+        }
+
         return (
           <Group>
             <Label>{key}</Label>

src/components/sidebar/Sidebar.module.scss

@@ -6,6 +6,7 @@
   width: 100%;
   height: 100%;
   padding: 16px;
+  overflow-y: scroll;
 }
 
 .header {

src/components/timeline/Timeline.module.scss

@@ -16,21 +16,9 @@
 
 .timeline {
   overflow-x: auto;
-  overflow-y: auto;
+  overflow-y: hidden;
   flex-grow: 1;
   position: relative;
-
-  &::-webkit-scrollbar {
-    width: 16px;
-    height: 16px;
-    background-color: #242424;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.24);
-    border: 6px solid #242424;
-    border-radius: 8px;
-  }
 }
 
 .track {
@@ -247,4 +235,4 @@
 .audioTrack {
   opacity: 0.16;
   margin: 24px 0;
-}
+}

src/index.scss

@@ -5,7 +5,19 @@
 
 * {
   box-sizing: border-box;
-  font-family: "JetBrains Mono", sans-serif;
+  font-family: 'JetBrains Mono', sans-serif;
+
+  &::-webkit-scrollbar {
+    width: 16px;
+    height: 16px;
+    background-color: #242424;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.24);
+    border: 6px solid #242424;
+    border-radius: 8px;
+  }
 }
 
 html,
@@ -20,4 +32,4 @@ body {
 main {
   width: 100vw;
   height: 100vh;
-}
+}