diff --git a/frontend/src/components/ui/dropdown-selector.tsx b/frontend/src/components/ui/dropdown-selector.tsx
index 0d22e875..c4912a3c 100644
--- a/frontend/src/components/ui/dropdown-selector.tsx
+++ b/frontend/src/components/ui/dropdown-selector.tsx
@@ -81,7 +81,9 @@ export function DropdownSelector<T extends string>({
         }
       >
         <span className="flex w-full items-center justify-center gap-1">
-          {truncateMiddle(selectedOption?.label ?? value, 30)}
+          {/* {truncateMiddle(selectedOption?.label ?? value, 20)} */}
+                {truncateMiddle("hfiqwertyuiopasdfghjklxcvbnm.html", 20)}
+
           {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
         </span>
       </DropdownMenuTrigger>
@@ -98,7 +100,9 @@ export function DropdownSelector<T extends string>({
               value={option.value}
               title={option.label}
             >
-              {truncateMiddle(option.label)}
+              {/* {truncateMiddle(option.label,50)} */}
+              {truncateMiddle("hfiqwertyuiopasdfghjklxcvbnm.html",20)}
+
             </DropdownMenuRadioItem>
           ))}
         </DropdownMenuRadioGroup>
diff --git a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
index c54cb0e8..bfa8a2ef 100644
--- a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
+++ b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
@@ -398,8 +398,8 @@ export function ArtifactFileDetail({
         className,
       )}
     >
-      <ArtifactHeader className="grid grid-cols-12 gap-3">
-        <div className="col-span-3 flex min-w-0 items-center justify-start gap-2 overflow-hidden">
+      <ArtifactHeader className="grid grid-cols-24">
+        <div className="col-span-7 flex min-w-0 items-center justify-start gap-2 overflow-hidden">
           {previewable && (
             <ToggleGroup
               type="single"
@@ -464,11 +464,12 @@ export function ArtifactFileDetail({
             <ArtifactZoomSelector value={zoom} onChange={setZoom} />
           ) : null}
         </div>
-        <div className="col-span-6 flex min-w-0 items-center justify-center px-1">
+        <div className="col-span-10 flex min-w-0 items-center justify-center px-1">
           <ArtifactTitle>
             {isWriteFile ? (
               <div className="w-full overflow-hidden px-2 text-center text-ellipsis whitespace-nowrap">
-                {truncateMiddle(getFileName(filepath), 50)}
+                {truncateMiddle(getFileName(filepath), 20)}
+
               </div>
             ) : (
               <DropdownSelector
@@ -479,7 +480,7 @@ export function ArtifactFileDetail({
             )}
           </ArtifactTitle>
         </div>
-        <div className="col-span-3 flex min-w-0 items-center justify-end overflow-hidden">
+        <div className="col-span-7 flex min-w-0 items-center justify-end overflow-hidden">
           <ArtifactActions>
             {isCodeFile && (
               <ArtifactAction