fix filename container shrinking during load

determined-ai · Aug 21, 2024 · 03346ee · 03346ee
1 parent 8bf64e9
commit 03346ee
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 54 deletions.
diff --git a/src/kit/CodeEditor.tsx b/src/kit/CodeEditor.tsx
@@ -259,33 +259,31 @@ const CodeEditor: React.FC<Props> = ({
         onSelect={handleSelectFile}
       />
       {!!activeFile?.title && (
-        <div className={css.fileDir}>
-          <div className={css.fileInfo}>
-            <div className={css.buttonContainer}>
-              <>
-                {activeFile.icon ?? <Icon decorative name="document" />}
-                <span className={css.filePath}>
-                  <>{activeFile.title}</>
-                </span>
-                {activeFile?.subtitle && (
-                  <span className={css.fileDesc}> {activeFile?.subtitle}</span>
-                )}
-                {readonly && <span className={css.readOnly}>read-only</span>}
-              </>
-            </div>
-            <div className={css.buttonsContainer}>
-              {/*
-               * TODO: Add notebook integration
-               * <Button type="text">Open in Notebook</Button>
-               */}
-              {readonly && !loadableFile.isNotLoaded && (
-                <Button
-                  icon={<Icon name="download" showTooltip size="small" title="Download File" />}
-                  type="text"
-                  onClick={handleDownloadClick}
-                />
+        <div className={css.fileInfo}>
+          <div className={css.buttonContainer}>
+            <>
+              {activeFile.icon ?? <Icon decorative name="document" />}
+              <span className={css.filePath}>
+                <>{activeFile.title}</>
+              </span>
+              {activeFile?.subtitle && (
+                <span className={css.fileDesc}> {activeFile?.subtitle}</span>
               )}
-            </div>
+              {readonly && <span className={css.readOnly}>read-only</span>}
+            </>
+          </div>
+          <div className={css.buttonsContainer}>
+            {/*
+             * TODO: Add notebook integration
+             * <Button type="text">Open in Notebook</Button>
+             */}
+            {readonly && !loadableFile.isNotLoaded && (
+              <Button
+                icon={<Icon name="download" showTooltip size="small" title="Download File" />}
+                type="text"
+                onClick={handleDownloadClick}
+              />
+            )}
           </div>
         </div>
       )}

diff --git a/src/kit/CodeEditor/CodeEditor.module.scss b/src/kit/CodeEditor/CodeEditor.module.scss
@@ -1,7 +1,7 @@
 .codeEditorBase {
   display: grid;
   grid-template:
-    'tree title' minmax(38px, min-content)
+    'tree title' minmax(40px, min-content)
     'tree editor' auto / clamp(300px, 25vw, 400px) minmax(0, auto);
   max-width: 100vw;
   min-height: 250px;
@@ -27,38 +27,35 @@
     margin-top: 5em;
     text-align: center;
   }
-  .fileDir {
+  .fileInfo {
+    align-items: center;
+    background-color: var(--theme-stage);
+    border: solid var(--theme-stroke-width) var(--theme-stage-border);
+    border-bottom: none;
+    border-radius: 0;
+    display: flex;
     grid-area: title;
+    justify-content: space-between;
+    padding: 0.25em 1em;
 
-    .fileInfo {
+    .buttonContainer {
       align-items: center;
-      background-color: var(--theme-stage);
-      border: solid var(--theme-stroke-width) var(--theme-stage-border);
-      border-bottom: none;
-      border-radius: 0;
       display: flex;
       justify-content: space-between;
-      padding: 0.25em 1em;
-
-      .buttonContainer {
-        align-items: center;
-        display: flex;
-        justify-content: space-between;
-      }
-      .filePath {
-        margin-left: 10px;
-      }
-      .fileDesc,
-      .readOnly {
-        color: var(--theme-stage-on-weak);
-        margin-left: var(--spacing-xl-2);
-      }
-      .readOnly {
-        font-variant: small-caps;
-      }
-      .buttonsContainer {
-        display: flex;
-      }
+    }
+    .filePath {
+      margin-left: 10px;
+    }
+    .fileDesc,
+    .readOnly {
+      color: var(--theme-stage-on-weak);
+      margin-left: var(--spacing-xl-2);
+    }
+    .readOnly {
+      font-variant: small-caps;
+    }
+    .buttonsContainer {
+      display: flex;
     }
   }
   .editor {