Fix flex grid and usage of static lengths (#486)

- Use flex grid grow/shrink/basis to control the grow/shrink behavior of
  flyout header elements
- Don't wrap header flex items
- Truncate header flex items using ellipsis overflow
- Control height through font height and tame usage of line-height to be
  consistent
- Move padding from header to header>span so that logo doesn't have to
  break out of content height or line height to display larger than the
  font size
- Increase the flyout width and make width controllable by variable

----

- Fixes #485
- Fixes #400
- Refs #394

----


![image](https://github.com/user-attachments/assets/6190ea0f-10bf-4420-b61e-34b551d2df33)

![image](https://github.com/user-attachments/assets/28175a05-0710-4580-b1db-a5757de5e07d)


![image](https://github.com/user-attachments/assets/4ca175b6-5fd4-4ceb-b599-df93a7af3a30)
Note here that the logo scales with the font size correctly.


![image](https://github.com/user-attachments/assets/51818f71-5930-4288-b633-dbb7356f0c87)

![image](https://github.com/user-attachments/assets/885da0c3-2661-4b65-bd07-21eb1c331a64)

![image](https://github.com/user-attachments/assets/d300df2e-8f42-4de1-b405-c2bf31a8dcb5)

Author: agjohnson

src/flyout.css

@@ -2,7 +2,7 @@
 
 .container {
   position: fixed;
-  max-width: 300px;
+  max-width: var(--readthedocs-flyout-max-width, 25em);
   width: auto;
   height: auto;
   max-height: calc(100% - 100px);
@@ -46,6 +46,7 @@
     "sans-serif"
   );
   font-size: var(--addons-flyout-font-size);
+  line-height: 1.2em;
   color: var(--readthedocs-flyout-color, rgb(128, 128, 128));
   background-color: var(--readthedocs-flyout-background-color, rgb(39, 39, 37));
   z-index: 3000;
@@ -55,42 +56,56 @@
 
 header {
   display: flex;
-  flex-flow: row wrap;
-  justify-content: space-between;
+  flex-flow: row nowrap;
+  gap: 1em;
   align-items: center;
   cursor: pointer;
   background-color: var(--readthedocs-flyout-background-color, rgb(39, 39, 37));
   position: sticky;
-  top: 0;
-  padding: 10px 0;
+  top: 0px;
+  font-size: var(--readthedocs-flyout-header-font-size, 1.25em);
+}
+
+header > img.logo {
+  /* Total height of 1.5 + 0.5 + 0.5 = 2.5em */
+  max-height: 1.5em;
+  width: auto;
+  padding: 0.5em 0em;
+  /* Don't grow past content size, do shrink down to min-content */
+  flex: 0 1 auto;
 }
 
 header > span {
   color: var(--readthedocs-flyout-current-version-color, #27ae60);
-  font-size: var(
-    --readthedocs-flyout-header-font-size,
-    calc(var(--addons-flyout-font-size) * 1.125)
-  );
-  margin-left: 10px;
+  /* Total height of 1 + 0.75 + 0.75 = 2.5em */
+  padding: 0.75em 0em;
+  line-height: 1em;
+  /* Don't grow past content size or shrink below min-content */
+  flex: 0 0 auto;
+  /* Trim content to get ellipsis on wide content */
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+header > span.version {
+  /* Grow to fill parent based on content width, shrink content when needed (for ellipsis) */
+  flex: 0 1 auto;
+}
+
+/* Give the flex box extra spacing to the left of the first span item. This puts
+ * automatic spacing between the logo and the text detail spans */
+header > span:first-of-type {
+  margin-left: auto;
 }
 
 header > span svg.icon {
   color: rgb(128, 128, 128);
-  height: var(
-    --readthedocs-flyout-header-font-size,
-    calc(var(--addons-flyout-font-size) * 1.125)
-  );
-  padding-right: 5px;
+  height: 1em;
+  padding-right: 0.25em;
   vertical-align: middle;
 }
 
-header > img.logo {
-  text-align: center;
-  max-width: 106px;
-  max-height: 22px;
-  margin-right: 10px;
-}
-
 main {
   padding: 5px;
   padding-bottom: 15px;

src/flyout.js

@@ -81,14 +81,14 @@ export class FlyoutElement extends LitElement {
       this.config.projects.current.versioning_scheme !==
       "single_version_without_translations"
     ) {
-      version = html`<span
+      version = html`<span class="version"
         >${iconCodeBranch.node[0]} ${this.config.versions.current.slug}</span
       >`;
     }
 
     let translation = nothing;
     if (this.config.projects.translations.length > 0) {
-      translation = html`<span
+      translation = html`<span class="language"
         >${iconLanguage.node[0]}
         ${this.config.projects.current.language.code}</span
       >`;

tests/__snapshots__/flyout.test.snap.js

@@ -9,10 +9,10 @@ snapshots["Flyout addon snapshot flyout completely"] =
       class="logo"
       src="data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e%3csvg:svg version='1.1' id='svg' x='0px' y='0px' viewBox='694 197 346.69855 399.98477' sodipodi:docname='logo-light.svg' width='346.69855' height='399.98477' inkscape:version='1.3.2 (091e20ef0f%2c 2023-11-25%2c custom)' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:svg='http://www.w3.org/2000/svg'%3e %3csvg:defs id='defs12' /%3e %3csodipodi:namedview id='namedview12' pagecolor='white' bordercolor='black' borderopacity='0.25' inkscape:showpageshadow='2' inkscape:pageopacity='0.0' inkscape:pagecheckerboard='0' inkscape:deskcolor='%23d1d1d1' inkscape:zoom='1.252' inkscape:cx='998.40256' inkscape:cy='199.68051' inkscape:window-width='3440' inkscape:window-height='1389' inkscape:window-x='0' inkscape:window-y='27' inkscape:window-maximized='1' inkscape:current-layer='svg' /%3e %3csvg:g id='logo' transform='matrix(0.55753644%2c0%2c0%2c0.55753644%2c66.531812%2c1050.1262)'%3e %3csvg:path style='fill:%23fcfcfc' d='m 1408.1%2c-1181.7 c -7.5%2c1 -12.7%2c7.8 -11.7%2c15.3 0.7%2c5.4 4.6%2c9.9 9.9%2c11.3 0%2c0 33.2%2c11 89.7%2c15.6 45.4%2c3.7 96.9%2c-3.2 96.9%2c-3.2 7.5%2c-0.2 13.5%2c-6.5 13.2%2c-14 -0.3%2c-7.5 -6.5%2c-13.5 -14%2c-13.2 -0.9%2c0 -1.8%2c0.1 -2.6%2c0.3 0%2c0 -50.4%2c6.2 -91.3%2c2.9 -54%2c-4.4 -83.4%2c-14.3 -83.4%2c-14.3 -2.2%2c-0.7 -4.5%2c-1 -6.7%2c-0.7 z m 0%2c-67.6 c -7.5%2c1 -12.7%2c7.8 -11.7%2c15.3 0.7%2c5.4 4.6%2c9.9 9.9%2c11.3 0%2c0 33.2%2c11 89.7%2c15.6 45.4%2c3.7 96.9%2c-3.2 96.9%2c-3.2 7.5%2c-0.2 13.5%2c-6.5 13.2%2c-14 -0.3%2c-7.5 -6.5%2c-13.5 -14%2c-13.2 -0.9%2c0 -1.8%2c0.1 -2.6%2c0.3 0%2c0 -50.4%2c6.2 -91.3%2c2.9 -54%2c-4.4 -83.4%2c-14.3 -83.4%2c-14.3 -2.2%2c-0.7 -4.5%2c-1 -6.7%2c-0.7 z m 0%2c-67.6 c -7.5%2c1 -12.7%2c7.8 -11.7%2c15.3 0.7%2c5.4 4.6%2c9.9 9.9%2c11.3 0%2c0 33.2%2c11 89.7%2c15.6 45.4%2c3.7 96.9%2c-3.2 96.9%2c-3.2 7.5%2c-0.2 13.5%2c-6.5 13.2%2c-14 -0.3%2c-7.5 -6.5%2c-13.5 -14%2c-13.2 -0.9%2c0 -1.8%2c0.1 -2.6%2c0.3 0%2c0 -50.4%2c6.2 -91.3%2c2.9 -54%2c-4.4 -83.4%2c-14.3 -83.4%2c-14.3 -2.2%2c-0.7 -4.5%2c-1 -6.7%2c-0.7 z m 0%2c-67.5 c -7.5%2c1 -12.7%2c7.8 -11.7%2c15.3 0.7%2c5.4 4.6%2c9.9 9.9%2c11.3 0%2c0 33.2%2c11 89.7%2c15.6 45.4%2c3.7 96.9%2c-3.2 96.9%2c-3.2 7.5%2c-0.2 13.5%2c-6.5 13.2%2c-14 -0.3%2c-7.5 -6.5%2c-13.5 -14%2c-13.2 -0.9%2c0 -1.8%2c0.1 -2.6%2c0.3 0%2c0 -50.4%2c6.2 -91.3%2c2.9 -54%2c-4.4 -83.4%2c-14.3 -83.4%2c-14.3 -2.2%2c-0.8 -4.5%2c-1 -6.7%2c-0.7 z m -94.7%2c-71.3 c -71%2c0.5 -97.5%2c22.3 -97.5%2c22.3 v 530.3 c 0%2c0 25.8%2c-22.3 109%2c-18.9 83.2%2c3.4 100.3%2c32.6 202.5%2c34.6 102.2%2c2.1 127.9%2c-15.7 127.9%2c-15.7 l 1.5%2c-540.6 c 0%2c0 -46%2c13 -135.5%2c13.7 -89.5%2c0.7 -111%2c-22.8 -193.2%2c-25.5 -5.1%2c-0.1 -10%2c-0.2 -14.7%2c-0.2 z m 59.4%2c34.6 c 0%2c0 43%2c14.2 122.5%2c18.2 67.2%2c3.3 134.5%2c-6.6 134.5%2c-6.6 V -929 c 0%2c0 -34.1%2c17.9 -119.3%2c11.8 -66%2c-4.7 -138.7%2c-29.7 -138.7%2c-29.7 z m -41.5%2c12.5 c 7.6%2c0 13.7%2c6.2 13.7%2c13.7 0%2c7.5 -6.2%2c13.7 -13.7%2c13.7 0%2c0 -22.3%2c0.1 -35.8%2c1.5 -22.8%2c2.3 -38.3%2c10.6 -38.3%2c10.6 -6.7%2c3.5 -15%2c1 -18.5%2c-5.7 -3.5%2c-6.7 -1%2c-15 5.7%2c-18.5 0%2c0 0%2c0 0%2c0 0%2c0 20.2%2c-10.7 48.4%2c-13.5 16.3%2c-1.7 38.5%2c-1.8 38.5%2c-1.8 z m -13.2%2c67.8 c 7.6%2c-0.2 13.3%2c0 13.3%2c0 7.5%2c0.9 12.9%2c7.8 12%2c15.3 -0.8%2c6.3 -5.7%2c11.2 -12%2c12 0%2c0 -22.3%2c0.1 -35.8%2c1.5 -22.8%2c2.3 -38.3%2c10.6 -38.3%2c10.6 -6.7%2c3.5 -15%2c0.9 -18.5%2c-5.8 -3.5%2c-6.7 -0.9%2c-15 5.8%2c-18.5 0%2c0 20.2%2c-10.7 48.4%2c-13.5 7.9%2c-0.9 17.5%2c-1.4 25.1%2c-1.6 z m 13.2%2c67.5 c 7.6%2c0 13.7%2c6.2 13.7%2c13.7 0%2c7.6 -6.2%2c13.7 -13.7%2c13.7 0%2c0 -22.3%2c-0.1 -35.8%2c1.2 -22.8%2c2.3 -38.3%2c10.6 -38.3%2c10.6 -6.7%2c3.5 -15%2c0.9 -18.5%2c-5.8 -3.5%2c-6.7 -0.9%2c-15 5.8%2c-18.5 0%2c0 20.2%2c-10.7 48.4%2c-13.5 16.2%2c-1.5 38.4%2c-1.4 38.4%2c-1.4 z' id='path1' /%3e %3c/svg:g%3e %3cdiv id='saka-gui-root'%3e %3cdiv%3e %3cdiv%3e %3cstyle /%3e %3c/div%3e %3c/div%3e %3c/div%3e%3c/svg:svg%3e"
     >
-    <span>
+    <span class="language">
       en
     </span>
-    <span>
+    <span class="version">
       latest
     </span>
   </header>
@@ -126,10 +126,10 @@ snapshots["Flyout addon snapshot flyout with search disabled"] =
       class="logo"
       src="data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e%3csvg:svg version='1.1' id='svg' x='0px' y='0px' viewBox='694 197 346.69855 399.98477' sodipodi:docname='logo-light.svg' width='346.69855' height='399.98477' inkscape:version='1.3.2 (091e20ef0f%2c 2023-11-25%2c custom)' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:svg='http://www.w3.org/2000/svg'%3e %3csvg:defs id='defs12' /%3e %3csodipodi:namedview id='namedview12' pagecolor='white' bordercolor='black' borderopacity='0.25' inkscape:showpageshadow='2' inkscape:pageopacity='0.0' inkscape:pagecheckerboard='0' inkscape:deskcolor='%23d1d1d1' inkscape:zoom='1.252' inkscape:cx='998.40256' inkscape:cy='199.68051' inkscape:window-width='3440' inkscape:window-height='1389' inkscape:window-x='0' inkscape:window-y='27' inkscape:window-maximized='1' inkscape:current-layer='svg' /%3e %3csvg:g id='logo' transform='matrix(0.55753644%2c0%2c0%2c0.55753644%2c66.531812%2c1050.1262)'%3e %3csvg:path style='fill:%23fcfcfc' d='m 1408.1%2c-1181.7 c -7.5%2c1 -12.7%2c7.8 -11.7%2c15.3 0.7%2c5.4 4.6%2c9.9 9.9%2c11.3 0%2c0 33.2%2c11 89.7%2c15.6 45.4%2c3.7 96.9%2c-3.2 96.9%2c-3.2 7.5%2c-0.2 13.5%2c-6.5 13.2%2c-14 -0.3%2c-7.5 -6.5%2c-13.5 -14%2c-13.2 -0.9%2c0 -1.8%2c0.1 -2.6%2c0.3 0%2c0 -50.4%2c6.2 -91.3%2c2.9 -54%2c-4.4 -83.4%2c-14.3 -83.4%2c-14.3 -2.2%2c-0.7 -4.5%2c-1 -6.7%2c-0.7 z m 0%2c-67.6 c -7.5%2c1 -12.7%2c7.8 -11.7%2c15.3 0.7%2c5.4 4.6%2c9.9 9.9%2c11.3 0%2c0 33.2%2c11 89.7%2c15.6 45.4%2c3.7 96.9%2c-3.2 96.9%2c-3.2 7.5%2c-0.2 13.5%2c-6.5 13.2%2c-14 -0.3%2c-7.5 -6.5%2c-13.5 -14%2c-13.2 -0.9%2c0 -1.8%2c0.1 -2.6%2c0.3 0%2c0 -50.4%2c6.2 -91.3%2c2.9 -54%2c-4.4 -83.4%2c-14.3 -83.4%2c-14.3 -2.2%2c-0.7 -4.5%2c-1 -6.7%2c-0.7 z m 0%2c-67.6 c -7.5%2c1 -12.7%2c7.8 -11.7%2c15.3 0.7%2c5.4 4.6%2c9.9 9.9%2c11.3 0%2c0 33.2%2c11 89.7%2c15.6 45.4%2c3.7 96.9%2c-3.2 96.9%2c-3.2 7.5%2c-0.2 13.5%2c-6.5 13.2%2c-14 -0.3%2c-7.5 -6.5%2c-13.5 -14%2c-13.2 -0.9%2c0 -1.8%2c0.1 -2.6%2c0.3 0%2c0 -50.4%2c6.2 -91.3%2c2.9 -54%2c-4.4 -83.4%2c-14.3 -83.4%2c-14.3 -2.2%2c-0.7 -4.5%2c-1 -6.7%2c-0.7 z m 0%2c-67.5 c -7.5%2c1 -12.7%2c7.8 -11.7%2c15.3 0.7%2c5.4 4.6%2c9.9 9.9%2c11.3 0%2c0 33.2%2c11 89.7%2c15.6 45.4%2c3.7 96.9%2c-3.2 96.9%2c-3.2 7.5%2c-0.2 13.5%2c-6.5 13.2%2c-14 -0.3%2c-7.5 -6.5%2c-13.5 -14%2c-13.2 -0.9%2c0 -1.8%2c0.1 -2.6%2c0.3 0%2c0 -50.4%2c6.2 -91.3%2c2.9 -54%2c-4.4 -83.4%2c-14.3 -83.4%2c-14.3 -2.2%2c-0.8 -4.5%2c-1 -6.7%2c-0.7 z m -94.7%2c-71.3 c -71%2c0.5 -97.5%2c22.3 -97.5%2c22.3 v 530.3 c 0%2c0 25.8%2c-22.3 109%2c-18.9 83.2%2c3.4 100.3%2c32.6 202.5%2c34.6 102.2%2c2.1 127.9%2c-15.7 127.9%2c-15.7 l 1.5%2c-540.6 c 0%2c0 -46%2c13 -135.5%2c13.7 -89.5%2c0.7 -111%2c-22.8 -193.2%2c-25.5 -5.1%2c-0.1 -10%2c-0.2 -14.7%2c-0.2 z m 59.4%2c34.6 c 0%2c0 43%2c14.2 122.5%2c18.2 67.2%2c3.3 134.5%2c-6.6 134.5%2c-6.6 V -929 c 0%2c0 -34.1%2c17.9 -119.3%2c11.8 -66%2c-4.7 -138.7%2c-29.7 -138.7%2c-29.7 z m -41.5%2c12.5 c 7.6%2c0 13.7%2c6.2 13.7%2c13.7 0%2c7.5 -6.2%2c13.7 -13.7%2c13.7 0%2c0 -22.3%2c0.1 -35.8%2c1.5 -22.8%2c2.3 -38.3%2c10.6 -38.3%2c10.6 -6.7%2c3.5 -15%2c1 -18.5%2c-5.7 -3.5%2c-6.7 -1%2c-15 5.7%2c-18.5 0%2c0 0%2c0 0%2c0 0%2c0 20.2%2c-10.7 48.4%2c-13.5 16.3%2c-1.7 38.5%2c-1.8 38.5%2c-1.8 z m -13.2%2c67.8 c 7.6%2c-0.2 13.3%2c0 13.3%2c0 7.5%2c0.9 12.9%2c7.8 12%2c15.3 -0.8%2c6.3 -5.7%2c11.2 -12%2c12 0%2c0 -22.3%2c0.1 -35.8%2c1.5 -22.8%2c2.3 -38.3%2c10.6 -38.3%2c10.6 -6.7%2c3.5 -15%2c0.9 -18.5%2c-5.8 -3.5%2c-6.7 -0.9%2c-15 5.8%2c-18.5 0%2c0 20.2%2c-10.7 48.4%2c-13.5 7.9%2c-0.9 17.5%2c-1.4 25.1%2c-1.6 z m 13.2%2c67.5 c 7.6%2c0 13.7%2c6.2 13.7%2c13.7 0%2c7.6 -6.2%2c13.7 -13.7%2c13.7 0%2c0 -22.3%2c-0.1 -35.8%2c1.2 -22.8%2c2.3 -38.3%2c10.6 -38.3%2c10.6 -6.7%2c3.5 -15%2c0.9 -18.5%2c-5.8 -3.5%2c-6.7 -0.9%2c-15 5.8%2c-18.5 0%2c0 20.2%2c-10.7 48.4%2c-13.5 16.2%2c-1.5 38.4%2c-1.4 38.4%2c-1.4 z' id='path1' /%3e %3c/svg:g%3e %3cdiv id='saka-gui-root'%3e %3cdiv%3e %3cdiv%3e %3cstyle /%3e %3c/div%3e %3c/div%3e %3c/div%3e%3c/svg:svg%3e"
     >
-    <span>
+    <span class="language">
       en
     </span>
-    <span>
+    <span class="version">
       latest
     </span>
   </header>

tests/flyout.test.html

@@ -241,8 +241,8 @@
               `
       <header>
         <img class="logo" alt="Read the Docs" />
-        <span>en</span>
-        <span>latest</span>
+        <span class="language">en</span>
+        <span class="version">latest</span>
       </header>
       `,
               { ignoreAttributes: [{ tags: ["img"], attributes: ["src"] }] },