make theme menu dense in wide view (#1323)

* make theme menu dense in wide view

* make menu as small as necessary

Author: e111077

packages/lit-dev-content/site/_includes/default.html

@@ -64,6 +64,7 @@
             height="30">
           </lazy-svg>
           <ol id="mobile-site-controls">
+            {% set isDesktopNav = false %}
             {% include 'site-nav.html' %}
           </ol>
         </div>

packages/lit-dev-content/site/_includes/header.html

@@ -11,6 +11,7 @@
     </a>
 
     <ol id="desktopNav">
+      {% set isDesktopNav = true %}
       {% include 'site-nav.html' %}
     </ol>
 

packages/lit-dev-content/site/_includes/site-nav.html

@@ -32,7 +32,7 @@
 <li>
    <ul class="icons">
       <li class="navItem">
-         <theme-switcher></theme-switcher>
+         <theme-switcher{% if isDesktopNav%} desktop{% endif %}></theme-switcher>
       </li>
       <li class="navItem">
          <a

packages/lit-dev-content/src/components/theme-switcher.ts

@@ -247,20 +247,36 @@ export class ThemeSwitcher extends LitElement {
     }
 
     md-menu {
-      min-width: 208px;
+      min-width: 0px;
     }
 
     #button > span {
       display: flex;
     }
 
-    [slot='end'] {
+    [slot='end'],
+    [slot='start'] {
       width: 24px;
       height: 24px;
     }
 
+    :host([desktop]) {
+      --md-menu-item-label-text-size: 0.9em;
+      --md-menu-item-one-line-container-height: 40px;
+      --md-menu-item-top-space: 8px;
+      --md-menu-item-bottom-space: 8px;
+      --md-menu-item-label-text-line-height: 24px;
+    }
+
+    :host([desktop]) [slot='start'],
+    :host([desktop]) [slot='end'] {
+      width: 20px;
+      height: 20px;
+    }
+
     [slot='headline'] {
       font-family: Manrope, sans-serif;
+      text-wrap: nowrap;
     }
   `;
 }