Improve responsive layout accuracy by using getBoundingClientRect for width measurements and add buffer for subpixel rendering

Author: robertpiosik

packages/shared/src/hooks/use-compacting.ts

@@ -7,8 +7,10 @@ export const use_compacting = (max_compact_step = 4) => {
 
   const report_width = useCallback((width: number, step: number) => {
     set_thresholds((prev) => {
-      if (prev[step] == width) return prev
-      return { ...prev, [step]: width }
+      // Round up and add 1px buffer to account for subpixel rendering differences
+      const threshold = Math.ceil(width) + 1
+      if (prev[step] == threshold) return prev
+      return { ...prev, [step]: threshold }
     })
   }, [])
 

packages/ui/src/components/editor/panel/BrowserExtensionMessage/BrowserExtensionMessage.tsx

@@ -15,7 +15,7 @@ export const BrowserExtensionMessage: React.FC = () => {
         const child = children[i] as HTMLElement
         const style = getComputedStyle(child)
         width +=
-          child.offsetWidth +
+          child.getBoundingClientRect().width +
           parseFloat(style.marginLeft) +
           parseFloat(style.marginRight)
       }

packages/ui/src/components/editor/panel/PromptField/hooks/use-edit-format-compacting.ts

@@ -19,11 +19,11 @@ export const use_edit_format_compacting = () => {
     if (refs.every((ref) => ref.current)) {
       // Calculate total width of all elements
       const total_width = refs.reduce(
-        (acc, ref) => acc + (ref.current?.offsetWidth || 0),
+        (acc, ref) => acc + (ref.current?.getBoundingClientRect().width || 0),
         0
       )
       // Add gap (4px * 3 gaps)
-      const width = total_width + 12
+      const width = total_width
 
       report_width(width, compact_step)
     }

packages/ui/src/components/editor/panel/ResponsePreviewFooter/ResponsePreviewFooter.tsx

@@ -26,9 +26,9 @@ export const ResponsePreviewFooter: React.FC<Props> = ({
       // Padding & icon (approx 44px per button) + gap (8px * 2)
       const padding_and_gap = 3 * 40 + 2 * 8
       const width =
-        back_ref.current.offsetWidth +
-        reject_ref.current.offsetWidth +
-        accept_ref.current.offsetWidth +
+        back_ref.current.getBoundingClientRect().width +
+        reject_ref.current.getBoundingClientRect().width +
+        accept_ref.current.getBoundingClientRect().width +
         padding_and_gap
       report_width(width, compact_step)
     }

packages/vscode/package.json

@@ -2,7 +2,7 @@
   "name": "gemini-coder",
   "displayName": "Code Web Chat",
   "description": "CWC, the autofill for chatbots",
-  "version": "1.702.0",
+  "version": "1.703.0",
   "scripts": {
     "build": "npx vsce package --no-dependencies",
     "vscode:prepublish": "rimraf out && npm run compile",

packages/vscode/src/views/panel/frontend/Panel.tsx

@@ -210,7 +210,10 @@ export const Panel = () => {
     <LayoutContext.Provider value={layout_context_value}>
       <div className={styles.container}>
         <div className={styles.slot}>
-          <Layout on_donate_click={() => set_viewing_donations(true)}>
+          <Layout
+            on_donate_click={() => set_viewing_donations(true)}
+            are_links_dimmed={active_view == 'main'}
+          >
             <div
               className={cn(styles.content, {
                 [styles['content--hidden']]: active_view != 'main'

packages/vscode/src/views/panel/frontend/components/Layout/Footer/Footer.module.scss

@@ -5,15 +5,35 @@
   z-index: -1; // Makes context menu of a preset appear above
   display: flex;
   justify-content: space-between;
-  gap: 4px;
-  padding: 8px 12px;
+  align-items: center;
+  padding-right: 12px;
+  height: 41px;
   border-top: 1px solid var(--cwc-border-color-dimmed);
 
   > div {
     display: flex;
     gap: 6px;
   }
 
+  &__left {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    gap: 6px;
+    padding-left: 12px;
+    padding-right: 6px;
+    transition: var(--transition-duration-250) opacity
+      var(--transition-timing-function);
+
+    &--dimmed {
+      opacity: 0.3;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
   &__icon-button {
     display: flex;
     align-items: center;
@@ -28,20 +48,16 @@
       height: 16px;
     }
 
-    &--cwc {
-      background-color: black;
-
-      > svg {
-        fill: white;
-      }
-    }
-
     &--buy-me-a-coffee {
       background-color: #f7d600;
 
       > svg {
         fill: black;
       }
+
+      &:hover {
+        background-color: color-mix(in srgb, #f7d600, black 10%);
+      }
     }
 
     &--reddit {
@@ -50,6 +66,10 @@
       > svg {
         fill: white;
       }
+
+      &:hover {
+        background-color: color-mix(in srgb, #ff4500, black 10%);
+      }
     }
 
     &--discord {
@@ -58,6 +78,10 @@
       > svg {
         fill: white;
       }
+
+      &:hover {
+        background-color: color-mix(in srgb, #5765f2, black 10%);
+      }
     }
   }
 

packages/vscode/src/views/panel/frontend/components/Layout/Footer/Footer.tsx

@@ -7,6 +7,7 @@ import { LayoutContext } from '../../../contexts/LayoutContext'
 
 type Props = {
   on_donate_click: () => void
+  are_links_dimmed?: boolean
 }
 
 export const Footer: React.FC<Props> = (props) => {
@@ -32,7 +33,8 @@ export const Footer: React.FC<Props> = (props) => {
   useLayoutEffect(() => {
     if (left_ref.current && right_ref.current) {
       const width =
-        left_ref.current.offsetWidth + right_ref.current.offsetWidth + 6
+        left_ref.current.getBoundingClientRect().width +
+        right_ref.current.getBoundingClientRect().width
       report_width(width, compact_step)
     }
   }, [compact_step, report_width])
@@ -69,7 +71,12 @@ export const Footer: React.FC<Props> = (props) => {
   return (
     <>
       <div className={styles.footer} ref={container_ref}>
-        <div ref={left_ref}>
+        <div
+          ref={left_ref}
+          className={cn(styles.footer__left, {
+            [styles['footer__left--dimmed']]: props.are_links_dimmed
+          })}
+        >
           <a
             className={cn(
               styles['footer__icon-button'],

packages/vscode/src/views/panel/frontend/components/Layout/Layout.tsx

@@ -4,13 +4,21 @@ import { Footer } from './Footer'
 type Props = {
   children: React.ReactNode
   on_donate_click: () => void
+  are_links_dimmed?: boolean
 }
 
-export const Layout: React.FC<Props> = ({ children, on_donate_click }) => {
+export const Layout: React.FC<Props> = ({
+  children,
+  on_donate_click,
+  are_links_dimmed
+}) => {
   return (
     <div className={styles.container}>
       <div className={styles.content}>{children}</div>
-      <Footer on_donate_click={on_donate_click} />
+      <Footer
+        on_donate_click={on_donate_click}
+        are_links_dimmed={are_links_dimmed}
+      />
     </div>
   )
 }

packages/vscode/src/views/panel/frontend/components/donations/DonationsFooter/DonationsFooter.tsx

@@ -17,8 +17,8 @@ export const DonationsFooter: React.FC<Props> = (props) => {
     if (close_ref.current && coffee_ref.current) {
       const padding_and_gap = 2 * 24 + 8
       const width =
-        close_ref.current.offsetWidth +
-        coffee_ref.current.offsetWidth +
+        close_ref.current.getBoundingClientRect().width +
+        coffee_ref.current.getBoundingClientRect().width +
         padding_and_gap
       report_width(width, compact_step)
     }