Truncate file paths from the left in the preview header (#322)

This adjusts the block header styling to remove a bunch of unnecessary
attributes and to ensure that we have more consistent shrinking
behavior. Now, file paths will truncate starting on the left side, to
preserve the file name as long as possible. Also, the widget name can
shrink down to zero, while preserving the widget icon, since it's
unnecessary to have both when the widget is small.

<img width="415" alt="image"
src="https://github.com/user-attachments/assets/46e0a74a-f35d-4d09-9c67-019936e67e41">

frontend/app/block/block.less

@@ -85,7 +85,8 @@
 
                 .block-frame-default-header-iconview {
                     display: flex;
-                    flex: 0 1 auto;
+                    flex-shrink: 3;
+                    min-width: 17px;
                     align-items: center;
                     gap: 8px;
                     overflow-x: hidden;
@@ -100,10 +101,11 @@
                     }
 
                     .block-frame-view-type {
-                        font-weight: 700;
                         overflow-x: hidden;
                         text-wrap: nowrap;
                         text-overflow: ellipsis;
+                        flex-shrink: 1;
+                        min-width: 0;
                     }
 
                     .block-frame-blockid {
@@ -116,12 +118,12 @@
                     font: var(--fixed-font);
                     font-size: 11px;
                     opacity: 0.7;
-                    overflow-x: hidden;
                     flex-grow: 1;
 
                     &.preview-filename {
+                        direction: rtl;
+                        text-align: left;
                         span {
-                            height: 100%;
                             cursor: pointer;
 
                             &:hover {
@@ -168,7 +170,7 @@
                     }
 
                     .connection-name {
-                        flex: 1 100 auto;
+                        flex: 1 2 auto;
                         overflow: hidden;
                         padding-right: 4px;
                     }
@@ -176,11 +178,10 @@
 
                 .block-frame-textelems-wrapper {
                     display: flex;
-                    flex: 1 100 auto;
+                    flex: 1 2 auto;
                     min-width: 0;
                     gap: 8px;
                     align-items: center;
-                    overflow-x: hidden;
 
                     .block-frame-div {
                         display: flex;

frontend/app/block/blockframe.tsx

@@ -178,24 +178,13 @@ const BlockFrame_Header = ({
         if (!util.isBlank(headerTextUnion)) {
             headerTextElems.push(
                 <div key="text" className="block-frame-text">
-                    {headerTextUnion}
+                    &lrm;{headerTextUnion}
                 </div>
             );
         }
     } else if (Array.isArray(headerTextUnion)) {
         headerTextElems.push(...renderHeaderElements(headerTextUnion, preview));
     }
-    if (manageConnection) {
-        const connButtonElem = (
-            <ConnectionButton
-                ref={connBtnRef}
-                key="connbutton"
-                connection={blockData?.meta?.connection}
-                changeConnModalAtom={changeConnModalAtom}
-            />
-        );
-        headerTextElems.unshift(connButtonElem);
-    }
     headerTextElems.unshift(<ControllerStatusIcon key="connstatus" blockId={nodeModel.blockId} />);
 
     return (
@@ -206,7 +195,14 @@ const BlockFrame_Header = ({
                 <div className="block-frame-view-type">{viewName}</div>
                 {showBlockIds && <div className="block-frame-blockid">[{nodeModel.blockId.substring(0, 8)}]</div>}
             </div>
-
+            {manageConnection && (
+                <ConnectionButton
+                    ref={connBtnRef}
+                    key="connbutton"
+                    connection={blockData?.meta?.connection}
+                    changeConnModalAtom={changeConnModalAtom}
+                />
+            )}
             <div className="block-frame-textelems-wrapper">{headerTextElems}</div>
             <div className="block-frame-end-icons">{endIconsElem}</div>
         </div>
@@ -222,7 +218,7 @@ const HeaderTextElem = React.memo(({ elem, preview }: { elem: HeaderElem; previe
         return (
             <div className={clsx("block-frame-text", elem.className)}>
                 <span ref={preview ? null : elem.ref} onClick={() => elem?.onClick()}>
-                    {elem.text}
+                    &lrm;{elem.text}
                 </span>
             </div>
         );

frontend/app/view/preview/preview.tsx

@@ -143,7 +143,6 @@ export class PreviewModel implements ViewModel {
         this.monacoRef = createRef();
         this.viewIcon = jotai.atom((get) => {
             const blockData = get(this.blockAtom);
-            const fileName = get(this.metaFilePath);
             const mimeTypeLoadable = get(this.fileMimeTypeLoadable);
             if (blockData?.meta?.icon) {
                 return blockData.meta.icon;