Merge pull request #3671 from himanshupal/explorer-layout-shift

Fix layout shift in explorer

apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css

@@ -5640,6 +5640,9 @@ a.bg-dark:focus,a.bg-dark:hover,button.bg-dark:focus,button.bg-dark:hover {
 .bg-transparent {
     background-color:transparent!important
 }
+.border-no-shift {
+  box-shadow: inset 0 0 0 1px #dee2e6;
+}
 .border {
     border:1px solid #dee2e6!important
 }

apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css

@@ -5642,6 +5642,9 @@ a.bg-dark:focus,a.bg-dark:hover,button.bg-dark:focus,button.bg-dark:hover {
 .bg-transparent {
     background-color:transparent!important
 }
+.border-no-shift {
+  box-shadow: inset 0 0 0 1px #dee2e6;
+}
 .border {
     border:1px solid #dee2e6!important
 }

apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css

@@ -4512,6 +4512,9 @@ a.bg-dark:focus,a.bg-dark:hover,button.bg-dark:focus,button.bg-dark:hover {
 .bg-transparent {
 	background-color:transparent!important
 }
+.border-no-shift {
+  box-shadow: inset 0 0 0 1px #dee2e6;
+}
 .border {
 	border:1px solid #dee2e6!important
 }

apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css

@@ -5642,6 +5642,9 @@ a.bg-dark:focus,a.bg-dark:hover,button.bg-dark:focus,button.bg-dark:hover {
 .bg-transparent {
     background-color:transparent!important
 }
+.border-no-shift {
+    box-shadow: inset 0 0 0 1px #dee2e6;
+  }
 .border {
     border:1px solid #dee2e6!important
 }

apps/remix-ide/src/assets/css/themes/remix-black_undtds.css

@@ -5707,6 +5707,9 @@ button.bg-dark:hover {
 .bg-transparent {
   background-color: transparent !important;
 }
+.border-no-shift {
+  box-shadow: inset 0 0 0 1px #3c3a3a;
+}
 .border {
   border: 1px solid #3c3a3a !important;
 }

apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css

@@ -6223,6 +6223,10 @@ button.bg-dark:focus {
   background-color: transparent !important;
 }
 
+.border-no-shift {
+  box-shadow: inset 0 0 0 1px #d6d8e3;
+}
+
 .border {
   border: 1px solid #d6d8e3 !important;
 }

apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css

@@ -5709,6 +5709,9 @@ button.bg-dark:hover {
 .bg-transparent {
   background-color: transparent !important;
 }
+.border-no-shift {
+  box-shadow: inset 0 0 0 1px #3f4455;
+}
 .border {
   border: 1px solid #3f4455 !important;
 }

apps/remix-ide/src/assets/css/themes/remix-hacker_owl.css

@@ -5720,6 +5720,9 @@ button.bg-dark:hover {
 .bg-transparent {
   background-color: transparent !important;
 }
+.border-no-shift {
+  box-shadow: inset 0 0 0 1px var(--theme-divider-color);
+}
 .border {
   border: 1px solid var(--theme-divider-color) !important;
 }

apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css

@@ -6219,6 +6219,10 @@ button.bg-dark:focus {
   background-color: transparent !important;
 }
 
+.border-no-shift {
+  box-shadow: inset 0 0 0 1px #d6d8e3;
+}
+
 .border {
   border: 1px solid #d6d8e3 !important;
 }

apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css

@@ -6225,6 +6225,10 @@ button.bg-dark:focus {
   background-color: transparent !important;
 }
 
+.border-no-shift {
+  box-shadow: inset 0 0 0 1px #9b8a85;
+}
+
 .border {
   border: 1px solid #9b8a85 !important;
 }

libs/remix-ui/workspace/src/lib/components/file-render.tsx

@@ -41,8 +41,8 @@ export const FileRender = (props: RenderFileProps) => {
   const labelClass = props.focusEdit.element === file.path
     ? 'bg-light' : props.focusElement.findIndex(item => item.key === file.path) !== -1
       ? 'bg-secondary' : hover
-        ? 'bg-light border' : (props.focusContext.element === file.path) && (props.focusEdit.element !== file.path)
-          ? 'bg-light border' : ''
+        ? 'bg-light border-no-shift' : (props.focusContext.element === file.path) && (props.focusEdit.element !== file.path)
+          ? 'bg-light border-no-shift' : ''
 
   const spreadProps = {
     onClick: (e) => e.stopPropagation()