fix: site dropdown truncate (#1064)

Author: lukasvinclav

src/unfold/static/unfold/css/styles.css

@@ -1,5 +1,5 @@
 <div class="border-b border-base-200 flex gap-3 items-center h-[65px] mb-5 dark:border-base-800 px-3" {% if site_dropdown %}x-data="{ openDropdown: false }"{% endif %}>
-    <div class="bg-transparent border border-transparent flex font-semibold gap-3 grow -mx-px h-[48px] items-center px-3 {% if site_dropdown %}cursor-pointer rounded transition-all hover:bg-white hover:border-base-200 hover:shadow-sm hover:dark:bg-base-800 hover:dark:border-base-700{% endif %}"
+    <div class="bg-transparent border border-transparent flex font-semibold gap-3 grow min-w-0 -mx-px h-[48px] items-center px-3 {% if site_dropdown %}cursor-pointer rounded transition-all hover:bg-white hover:border-base-200 hover:shadow-sm hover:dark:bg-base-800 hover:dark:border-base-700{% endif %}"
          x-on:click="openDropdown = !openDropdown"
          x-bind:class="{'bg-white border-base-200 shadow-sm dark:bg-base-800 dark:border-base-700': openDropdown, 'bg-transparent border-transparent': !openDropdown}">
         {% if site_logo %}

src/unfold/templates/unfold/helpers/navigation_header.html

@@ -3,7 +3,7 @@
 {% if site_dropdown %}
     <div class="absolute bg-white border flex flex-col left-3 py-1 rounded shadow-lg top-[73px] w-[264px] z-50 dark:bg-base-800 dark:border-base-700" x-cloak x-show="openDropdown" x-transition x-on:click.outside="openDropdown = false">
         {% for item in site_dropdown %}
-            <a href="{{ item.link }}" class="flex items-center gap-3 max-h-[30px] mx-1 px-2 py-2 rounded hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200">
+            <a href="{{ item.link }}" class="flex flex-row items-center gap-3 max-h-[30px] mx-1 px-2 py-2 rounded hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200">
                 {% if item.icon %}
                     <span class="material-symbols-outlined">
                         {{ item.icon }}

src/unfold/templates/unfold/helpers/site_dropdown.html

@@ -1,28 +1,30 @@
 {% load i18n %}
 
 {% if site_icon %}
-    <a href="{% url "admin:index" %}">
-        {% if site_icon.light and site_icon.dark %}
-            <img src="{{ site_icon.dark }}" alt="{% trans 'Home' %}" class="h-8 hidden dark:block"/>
+    <div class="shrink-0">
+        <a href="{% url "admin:index" %}">
+            {% if site_icon.light and site_icon.dark %}
+                <img src="{{ site_icon.dark }}" alt="{% trans 'Home' %}" class="h-8 hidden dark:block"/>
 
-            <img src="{{ site_icon.light }}" alt="{% trans 'Home' %}" class="block h-8 dark:hidden" />
-        {% else %}
-            <img src="{{ site_icon }}" class="h-8" alt="{% trans 'Home' %}" />
-        {% endif %}
-    </a>
+                <img src="{{ site_icon.light }}" alt="{% trans 'Home' %}" class="block h-8 dark:hidden" />
+            {% else %}
+                <img src="{{ site_icon }}" class="h-8" alt="{% trans 'Home' %}" />
+            {% endif %}
+        </a>
+    </div>
 {% else %}
     <a href="{% url "admin:index" %}" class="bg-primary-600 flex h-8 items-center justify-center rounded text-white text-xs w-8">
         <span class="material-symbols-outlined md-18">{% if site_symbol %}{{ site_symbol }}{% else %}settings{% endif %}</span>
     </a>
 {% endif %}
 
-<div class="flex flex-col gap-1">
-    <div class="text-font-important-light leading-none tracking-tight dark:text-font-important-dark *:leading-none {% if site_subheader %}xl:text-sm{% else %}xl:text-base{% endif %}">
+<div class="flex flex-col grow min-w-0">
+    <div class="text-font-important-light leading-normal tracking-tight dark:text-font-important-dark *:leading-none {% if site_subheader %}xl:text-sm{% else %}xl:text-base{% endif %}">
         {{ branding }}
     </div>
 
     {% if site_subheader %}
-        <div class="font-normal leading-none text-font-subtle-light text-xs dark:text-font-subtle-dark">
+        <div class="font-normal leading-normal text-font-subtle-light text-xs truncate dark:text-font-subtle-dark">
             {{ site_subheader }}
         </div>
     {% endif %}