diff --git a/src/common/SubNav.tsx b/src/common/SubNav.tsx
index 79d109c3..a77e1bc7 100644
--- a/src/common/SubNav.tsx
+++ b/src/common/SubNav.tsx
@@ -32,7 +32,7 @@ export function SubNavItem({ icon, text }: SubNavItemProps) {
     const elIcon = document.querySelector<HTMLElement>(".navlink.active .navlink-icon");
     const elText = document.querySelector<HTMLElement>(".navlink.active .navlink-text");
     if (el && elIcon && elText) {
-      el.classList.add(...inactiveLinkClass);
+      el.classList.add(...inactiveLinkClass, "!w-[50px]");
       elText.classList.add(...inactiveTextClass, "!w-0");
       elIcon.classList.remove("!mr-2");
     }
@@ -44,7 +44,7 @@ export function SubNavItem({ icon, text }: SubNavItemProps) {
     const elIcon = document.querySelector<HTMLElement>(".navlink.active .navlink-icon");
     const elText = document.querySelector<HTMLElement>(".navlink.active .navlink-text");
     if (el && elIcon && elText) {
-      el.classList.remove(...inactiveLinkClass);
+      el.classList.remove(...inactiveLinkClass, "!w-[50px]");
       elText.classList.remove(...inactiveTextClass, "!w-0");
       elIcon.classList.add("!mr-2");
     }
diff --git a/src/editor/Editor.tsx b/src/editor/Editor.tsx
index eea9b238..3e1084eb 100644
--- a/src/editor/Editor.tsx
+++ b/src/editor/Editor.tsx
@@ -64,7 +64,7 @@ export default function VideoEditor() {
   } = useEditor(playerRef, timelineRef, progressBarRef, clipsBarRef, genState.videoEditorVolume);
 
   return (
-    <div className="flex h-[calc(100vh_-_77px)] flex-col gap-1.5 my-1.5 h-full">
+    <div className="flex flex-col gap-1.5 my-1.5 h-[calc(100vh-77px)]">
       <div className="flex gap-1.5 mx-1.5">
         <Tooltip text="Back To Videos">
           <Button