diff --git a/web/templates/index.html b/web/templates/index.html
index 3fef2a0..05260e6 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -3,31 +3,31 @@
 {{define "content"}}
 <div class="space-y-4">
     <!-- Header with config name and back button -->
-    <div class="flex items-center justify-between">
-        <div class="flex items-center space-x-4">
-            <a href="/projects" class="text-gray-500 hover:text-gray-700" title="Все проекты">
+    <div class="flex items-center justify-between gap-4 flex-wrap">
+        <div class="flex items-center space-x-4 min-w-0">
+            <a href="/projects" class="text-gray-500 hover:text-gray-700 shrink-0" title="Все проекты">
                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9.75L12 3l9 6.75v9A2.25 2.25 0 0118.75 21h-13.5A2.25 2.25 0 013 18.75v-9z"></path>
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 21v-6h6v6"></path>
                 </svg>
             </a>
-            <div class="text-2xl font-bold flex items-center gap-2" id="config-breadcrumbs">
-                <a id="breadcrumb-project-code-link" href="/projects" class="text-blue-700 hover:underline">
+            <div class="text-2xl font-bold flex items-center gap-2 min-w-0" id="config-breadcrumbs">
+                <a id="breadcrumb-project-code-link" href="/projects" class="text-blue-700 hover:underline shrink-0">
                     <span id="breadcrumb-project-code">—</span>
                 </a>
-                <span class="text-gray-400">-</span>
-                <a id="breadcrumb-project-variant-link" href="/projects" class="text-blue-700 hover:underline">
+                <span class="text-gray-400 shrink-0">-</span>
+                <a id="breadcrumb-project-variant-link" href="/projects" class="text-blue-700 hover:underline shrink-0">
                     <span id="breadcrumb-project-variant">main</span>
                 </a>
-                <span class="text-gray-400">-</span>
-                <a id="breadcrumb-config-name-link" href="#" class="text-blue-700 hover:underline">
+                <span class="text-gray-400 shrink-0">-</span>
+                <a id="breadcrumb-config-name-link" href="#" class="text-blue-700 hover:underline shrink-0">
                     <span id="breadcrumb-config-name">Конфигуратор</span>
                 </a>
-                <span class="text-gray-400">-</span>
-                <span id="breadcrumb-config-version">main</span>
+                <span class="text-gray-400 shrink-0">-</span>
+                <span id="breadcrumb-config-version" class="shrink-0">main</span>
             </div>
         </div>
-        <div id="save-buttons" class="hidden flex items-center space-x-2">
+        <div id="save-buttons" class="hidden flex items-center space-x-2 shrink-0">
             <button id="refresh-prices-btn" onclick="refreshPrices()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                 Обновить цены
             </button>
@@ -545,7 +545,8 @@ function updateConfigBreadcrumbs() {
         if (projectVariantLinkEl) projectVariantLinkEl.href = '/projects';
     }
     codeEl.textContent = code;
-    variantEl.textContent = variant;
+    variantEl.textContent = truncateBreadcrumbSpecName(variant);
+    variantEl.title = variant;
     const fullConfigName = configName || 'Конфигурация';
     configEl.textContent = truncateBreadcrumbSpecName(fullConfigName);
     configEl.title = fullConfigName;