style: fix info scroll

apps/client/src/common/components/collapse-bar/CollapseBar.module.scss

@@ -6,6 +6,7 @@
   display: flex;
   justify-content: space-between;
   color: $section-white;
+  margin-top: $main-spacing;
   border-bottom: 1px solid $border-color-ondark;
   padding-bottom: $element-inner-spacing;
   margin-bottom: $element-spacing;

apps/client/src/features/editors/Editor.module.scss

@@ -164,7 +164,7 @@ $playback-width: 450px;
   }
 
   .header {
-    background-color: #202020;
+    background-color: $gray-1200;
     padding: 8px;
     border-left: 1px solid $white-10;
   }
@@ -172,10 +172,8 @@ $playback-width: 450px;
 
 .editor {
   grid-area: even;
-  height: calc(100% - 24px);
 
   .content {
-    height: calc(100% - 24px);
     overflow: hidden;
   }
 }
@@ -187,7 +185,6 @@ $playback-width: 450px;
   .content {
     display: flex;
     flex-direction: column;
-    height: calc(100% - 24px);
     overflow: hidden;
   }
 }

apps/client/src/features/info/CollapsableInfo.tsx

@@ -2,8 +2,6 @@ import { PropsWithChildren, useState } from 'react';
 
 import CollapseBar from '../../common/components/collapse-bar/CollapseBar';
 
-import style from './Info.module.scss';
-
 interface CollapsableInfoProps {
   title: string;
 }
@@ -13,9 +11,9 @@ export default function CollapsableInfo(props: PropsWithChildren<CollapsableInfo
   const [collapsed, setCollapsed] = useState(false);
 
   return (
-    <div className={style.container}>
+    <>
       <CollapseBar title={title} isCollapsed={collapsed} onClick={() => setCollapsed((prev) => !prev)} />
       {!collapsed && children}
-    </div>
+    </>
   );
 }

apps/client/src/features/info/Info.module.scss

@@ -9,10 +9,6 @@
   justify-content: space-between;
 }
 
-.container {
-  margin-top: $main-spacing;
-}
-
 .labels {
   font-size: $inner-section-text-size;
   display: flex;

apps/client/src/features/info/InfoLogger.module.scss

@@ -4,12 +4,8 @@
 $info-gray: $secondary-text-gray;
 $info-hover: $section-white;
 
-.infoLoggerContainer {
-  max-height: 80%;
-  height: 100%
-}
-
 .log {
+  flex: 1;
   height: 100%;
   overflow-y: scroll;
   font-size: 0.8em;

apps/client/src/features/info/InfoLogger.tsx

@@ -56,7 +56,7 @@ export default function InfoLogger() {
   }, []);
 
   return (
-    <div className={style.infoLoggerContainer}>
+    <>
       <div className={style.buttonBar}>
         <Button
           variant={showUser ? 'ontime-filled' : 'ontime-subtle'}
@@ -125,6 +125,6 @@ export default function InfoLogger() {
           </li>
         ))}
       </ul>
-    </div>
+    </>
   );
 }