toolbar styling

Author: RomneyDa

gui/src/components/FileIcon.tsx

@@ -45,7 +45,7 @@ export default function FileIcon({ filename, height, width }: FileIconProps) {
         height: height,
         fill: color,
         flexShrink: 0,
-        display: "block",
+        display: "flex",
       }}
     />
   );

gui/src/components/markdown/StepContainerPreToolbar/FileInfo.tsx

@@ -1,8 +1,8 @@
-import FileIcon from "../../FileIcon";
+import { inferResolvedUriFromRelativePath } from "core/util/ideUtils";
+import { getLastNPathParts } from "core/util/uri";
 import { useContext } from "react";
 import { IdeMessengerContext } from "../../../context/IdeMessenger";
-import { getLastNPathParts, getUriPathBasename } from "core/util/uri";
-import { inferResolvedUriFromRelativePath } from "core/util/ideUtils";
+import FileIcon from "../../FileIcon";
 
 export interface FileInfoProps {
   relativeFilepath: string;
@@ -23,17 +23,18 @@ const FileInfo = ({ relativeFilepath, range }: FileInfoProps) => {
   }
 
   return (
-    <div className="flex w-full min-w-0 items-center">
-      <div
-        className="mr-0.5 flex w-full min-w-0 cursor-pointer items-center gap-0.5"
-        onClick={onClickFileName}
-      >
+    <div
+      className="flex cursor-pointer flex-row items-center gap-0.5"
+      onClick={onClickFileName}
+    >
+      <div>
         <FileIcon height="20px" width="20px" filename={relativeFilepath} />
-        <span className="w-full truncate hover:underline">
-          {getLastNPathParts(relativeFilepath, 1)}
-          {range && ` ${range}`}
-        </span>
       </div>
+      <span className="line-clamp-1 break-all hover:underline">
+        asdfasdfasdfasdfasdfasdfasdf
+        {getLastNPathParts(relativeFilepath, 1)}
+        {range && ` ${range}`}
+      </span>
     </div>
   );
 };

gui/src/components/markdown/StepContainerPreToolbar/StepContainerPreToolbar.tsx

@@ -25,6 +25,8 @@ import GeneratingCodeLoader from "./GeneratingCodeLoader";
 import RunInTerminalButton from "./RunInTerminalButton";
 
 const TopDiv = styled.div`
+  display: flex;
+  flex-direction: column;
   outline: 1px solid ${vscCommandCenterInactiveBorder};
   outline-offset: -0.5px;
   border-radius: ${defaultBorderRadius};
@@ -37,7 +39,6 @@ const ToolbarDiv = styled.div<{ isExpanded: boolean }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: inherit;
   font-size: ${getFontSize() - 2}px;
   padding: 4px 6px;
   margin: 0;
@@ -181,31 +182,27 @@ export default function StepContainerPreToolbar(
 
   return (
     <TopDiv>
-      <ToolbarDiv isExpanded={isExpanded} className="find-widget-skip">
-        <div className="flex min-w-0 max-w-[45%] items-center">
+      <ToolbarDiv isExpanded={isExpanded} className="find-widget-skip gap-3">
+        <div className="flex max-w-72 flex-row items-center">
           <ChevronDownIcon
             onClick={onClickExpand}
-            className={`h-3.5 w-3.5 shrink-0 cursor-pointer text-gray-400 hover:brightness-125 ${
+            className={`h-3.5 w-3.5 flex-shrink-0 cursor-pointer text-gray-400 hover:brightness-125 ${
               isExpanded ? "rotate-0" : "-rotate-90"
             }`}
           />
-          <div className="w-full min-w-0">
-            <FileInfo
-              relativeFilepath={props.relativeFilepath}
-              range={props.range}
-            />
-          </div>
+          <FileInfo
+            relativeFilepath={props.relativeFilepath}
+            range={props.range}
+          />
         </div>
 
         <div className="flex items-center gap-3 max-sm:gap-1.5">
-          {isGeneratingCodeBlock && (
+          {isGeneratingCodeBlock ? (
             <GeneratingCodeLoader
               showLineCount={!isExpanded}
               codeBlockContent={codeBlockContent}
             />
-          )}
-
-          {!isGeneratingCodeBlock && (
+          ) : (
             <>
               <CopyButton text={props.codeBlockContent} />
               {isTerminalCodeBlock(props.language, props.codeBlockContent) ? (