fix(sw): align header logo styles and refine viewer UI

packages/sw/src/components/sw-header/SWHeader.tsx

@@ -254,6 +254,13 @@ export const SWHeader = forwardRef<HTMLElement, SWHeaderProps>(function SWHeader
   const [headerWidth, setHeaderWidth] = useState(1920)
   const [, setAreaWidth] = useState(0)
   const [barOffset, setBarOffset] = useState(0)
+  // 2026-10-23: the property bar strip reaches at least the 속성Bar | 속성창 divider (the 속성Bar toggle when the
+  // divider is not shown), measured like barOffset; null while the toggle is not in the header row (e.g. in More).
+  const [barEnd, setBarEnd] = useState<number | null>(null)
+  const measureBarEnd = (header: Element) => {
+    const edge = header.querySelector(".hm-sw-header__properties-divider") ?? header.querySelector(".hm-sw-header__properties .hm-sw-header__toggle:not([data-property-panel-trigger])")
+    setBarEnd(edge?.getClientRects().length ? edge.getBoundingClientRect().right - header.getBoundingClientRect().left : null)
+  }
   // Open next to the logo (documentOpenPlacement="header") moves into More when the measured header has no room.
   const openInHeader = documentOpenPlacement === "header" && shown("documentOpen")
   const leadingRef = useRef<HTMLDivElement>(null)
@@ -270,6 +277,7 @@ export const SWHeader = forwardRef<HTMLElement, SWHeaderProps>(function SWHeader
       // The object area can change alone (leading content, file name, window area): it re-runs the measured More.
       setAreaWidth(panelAnchorRef.current?.getBoundingClientRect().width ?? 0)
       setBarOffset((panelAnchorRef.current?.getBoundingClientRect().left ?? bounds.left) - bounds.left)
+      measureBarEnd(header)
     }
     const observer = new ResizeObserver(update)
     update()
@@ -277,6 +285,11 @@ export const SWHeader = forwardRef<HTMLElement, SWHeaderProps>(function SWHeader
     if (panelAnchorRef.current) observer.observe(panelAnchorRef.current)
     return () => observer.disconnect()
   }, [])
+  // The divider also moves when the measured More or the fields change inside the same object-area width.
+  useLayoutEffect(() => {
+    const header = fieldsRef.current?.closest(".hm-sw-header")
+    if (barOpen && header) measureBarEnd(header)
+  })
   // Space for the parts right of the logo, measured: the file name gives way first (its CSS clamp subtracts
   // --hm-sw-header-leading-width). Open and the other parts move into More by measurement (see "Measured More").
   useLayoutEffect(() => {
@@ -729,7 +742,7 @@ export const SWHeader = forwardRef<HTMLElement, SWHeaderProps>(function SWHeader
           <SWHeaderWindowControls onWindowMoveStart={onWindowMoveStart} onMinimize={onMinimize} onClose={onClose} showWindowMove={shown("windowMove")} showMinimize={shown("minimize")} showClose={shown("close")} />
         </div>}
       </div>
-      {barOpen && barData && <div className="hm-sw-header__bar-anchor" style={{ left: barOffset, maxWidth: `calc(100% - ${barOffset}px)` }}><SWHeaderPropertyBar {...barData} disabled={disabled || propertyBar?.disabled} id={barId} /></div>}
+      {barOpen && barData && <div className="hm-sw-header__bar-anchor" style={{ left: barOffset, maxWidth: `calc(100% - ${barOffset}px)` }}><SWHeaderPropertyBar {...barData} disabled={disabled || propertyBar?.disabled} id={barId} style={barEnd !== null && barEnd > barOffset ? { minWidth: barEnd - barOffset } : undefined} /></div>}
       {homeMenu && shown("home") && (
         <div className="hm-sw-header__home-menu" style={{ left: homeBox.left, maxWidth: homeBox.width }}>
           <SWHomeMenu {...homeMenu} id={homeMenu.id ?? homeMenuId} open={homeOpen} returnFocusRef={homeButtonRef}