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-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;
 }
@@ -9500,7 +9504,7 @@ a.text-dark:focus {
   border: none !important;
 }
 .remix-bg-opacity {
- background: rgba(248, 250, 254, 0.80) !important; 
+ background: rgba(248, 250, 254, 0.80) !important;
 }
 .plugins-list-header {
   background: transparent !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;
 }
@@ -8802,7 +8805,7 @@ a.text-dark:hover {
   padding: 0 !important;
   margin: 0 !important;
   border: 0 !important;
-  color: #DFE1EA !important; 
+  color: #DFE1EA !important;
 }
 .run-instance-list li {
   margin: 0 !important;

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

@@ -42,7 +42,7 @@
   --theme-bg-btn-dark--hover: #033863;
   --theme-border-tab: 1px solid #274052;
   --theme-border-default: 1px solid #07121ca6;
-  --theme-form-placeholder: #dfe1ea; 
+  --theme-form-placeholder: #dfe1ea;
 
   --font-family-sans-serif: "Saira", -apple-system, BlinkMacSystemFont,
     "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
@@ -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;
 }
@@ -8819,7 +8822,7 @@ a.text-dark:hover {
   padding: 0 !important;
   margin: 0 !important;
   border: 0 !important;
-  color: #DFE1EA !important; 
+  color: #DFE1EA !important;
 }
 .run-instance-list li {
   margin: 0 !important;
@@ -8923,10 +8926,10 @@ div[data-id="remixIdeSidePanel"] {
   background-color: var(--text-background);
 }
 
-.monaco-scrollable-element > .visible,  
-.monaco-scrollable-element > .visible .scrollbar, 
-.monaco-scrollable-element > .invisible, 
-.monaco-scrollable-element > .invisible .scrollbar, 
+.monaco-scrollable-element > .visible,
+.monaco-scrollable-element > .visible .scrollbar,
+.monaco-scrollable-element > .invisible,
+.monaco-scrollable-element > .invisible .scrollbar,
 .monaco-scrollable-element > .invisible .fade {
   background-color: var(--light)!important;
   color: var(--light)!important;
@@ -8937,4 +8940,4 @@ div[data-id="remixIdeSidePanel"] {
 
 .monaco-editor .vertical {
   box-shadow: none;
-}
+}

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;
 }
@@ -9496,7 +9500,7 @@ a.text-dark:focus {
   border: none !important;
 }
 .remix-bg-opacity {
-  background: rgba(248, 250, 254, 0.80) !important; 
+  background: rgba(248, 250, 254, 0.80) !important;
 }
 
 .plugins-list-header {

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;
 }
@@ -9502,7 +9506,7 @@ a.text-dark:focus {
   border: none !important;
 }
 .remix-bg-opacity {
- background: rgb(221 219 213 / 66%) !important; 
+ background: rgb(221 219 213 / 66%) !important;
 }
 .plugins-list-header {
   background: transparent !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()