Made room for the file tree in the editor sidebar

I'm not gonna add the file tree rn but that is probably the next thing I
will do.

src/app/editor/Editor_globals.css

@@ -2,13 +2,21 @@
 
 .sidebar {
   @apply bg-[rgb(24,24,36)] ml-[10px] mt-3 p-0 border border-[rgb(48,48,72)] rounded-lg;
-  @apply w-20 h-[calc(100vh_-_23px)];
-  @apply relative;
+  @apply w-100 h-[calc(100vh_-_23px)] flex flex-row;
 }
 
-.sidebar button {
+.sidebar-tabs {
+  @apply ml-2;
+}
+
+.sidebar-tabs button {
   @apply w-15 h-15 bg-[rgb(54,54,72)] hover:bg-[rgb(72,72,96)];
   @apply border border-[rgb(72,72,96)] hover:border-[rgb(96,96,128)] p-0 mt-2 rounded-lg;
   @apply transition-colors cursor-pointer;
-  @apply absolute left-1/2 -translate-x-1/2;
+}
+
+.separator {
+  /* @apply w-[1.5px] h-full bg-[rgb(48,48,72)]; */
+  @apply ml-2;
+  @apply h-full border-l border-[rgb(48,48,72)];
 }

src/app/editor/layout.tsx

@@ -18,9 +18,13 @@ export default function Editor_Layout ({
   return (
     <>
       <div className='sidebar'>
-        <button>
-          <Image src={file_list_icon} alt="File list icon" width={60} height={60} />
-        </button>
+        <div className='sidebar-tabs'>
+          <button>
+            <Image src={file_list_icon} alt="File list icon" width={60} height={60} />
+          </button>
+        </div>
+
+        <div className="separator"></div>
       </div>
 
       <main>{children}</main>