fix: minor ui adjustment to styling editor

Author: deltork

packages/studio-web/src/app/editor/editor.component.html

@@ -69,7 +69,7 @@ <h2 i18n="Title for upload box" class="title">
     <div id="readalongContainer" #readalongContainer></div>
     <div [class.d-none]="!hasFile" [class.d-lg-flex]="hasFile" class="flex-row">
       <div
-        class="handle me-2 d-none d-lg-block"
+        class="m-0 p-0 handle me-xl-2 d-none d-xl-block"
         #handle
         draggable="true"
         id="handle"

packages/studio-web/src/app/editor/editor.component.sass

@@ -8,7 +8,11 @@
   --bs-gutter-x: 0
 
 #readalongContainer
-  margin: 0 2.5vw
+  margin: 0 auto
+
+#styleWindow
+  justify-content: start
+  margin: 0 auto
 
 @media screen and (min-width:1200px)
   div > #handle
@@ -23,7 +27,8 @@
     margin-top: 1em
     cursor: col-resize
     z-index: 1000
-
+    display: block
+  #styleWindow
+    margin: 0
   app-wc-styling:has(#style-section.collapsed)
     width: 100px
-

packages/studio-web/src/app/shared/wc-styling/wc-styling.component.html

@@ -2,7 +2,7 @@
   #styleSection
   id="style-section"
   [class]="
-    'col p-3  bg-light' + ((collapsed$ | async) ? ' collapsed' : ' ms-xl-5')
+    'p-xl-3 pt-3  bg-light' + ((collapsed$ | async) ? ' collapsed' : ' ms-xl-5')
   "
 >
   <div class="d-flex flex-column flex-md-row justify-content-between header">

packages/studio-web/src/app/shared/wc-styling/wc-styling.component.sass

@@ -40,7 +40,7 @@ h2
 @media only screen and (max-width:1200px)
   #style-section
     width: 95vw
-    margin-left: 2.5vw
+    margin: auto
 
     div.header > div.helper-text
       display: none !important