diff --git a/frontend/index.html b/frontend/index.html
index 00d60a6..7e4f29f 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2158,11 +2158,11 @@
                                 
                                 <!-- Syntax Highlighting Toggle -->
                                 <div class="mb-4">
-                                    <label class="flex items-center justify-between cursor-pointer">
-                                        <span class="text-xs font-medium" style="color: var(--text-secondary);" x-text="t('syntax_highlight.title')"></span>
+                                    <label class="flex items-center justify-between gap-3 cursor-pointer">
+                                        <span class="text-xs font-medium flex-1 min-w-0" style="color: var(--text-secondary);" x-text="t('syntax_highlight.title')"></span>
                                         <div 
                                             @click="toggleSyntaxHighlight()"
-                                            class="relative w-10 h-5 rounded-full transition-colors cursor-pointer"
+                                            class="relative w-10 h-5 rounded-full transition-colors cursor-pointer flex-shrink-0"
                                             :style="syntaxHighlightEnabled ? 'background-color: var(--accent-primary)' : 'background-color: var(--bg-tertiary)'"
                                         >
                                             <div 
@@ -2176,11 +2176,11 @@
                                 
                                 <!-- Readable Line Length Toggle -->
                                 <div class="mb-4">
-                                    <label class="flex items-center justify-between cursor-pointer">
-                                        <span class="text-xs font-medium" style="color: var(--text-secondary);" x-text="t('settings.readable_line_length')"></span>
+                                    <label class="flex items-center justify-between gap-3 cursor-pointer">
+                                        <span class="text-xs font-medium flex-1 min-w-0" style="color: var(--text-secondary);" x-text="t('settings.readable_line_length')"></span>
                                         <div 
                                             @click="toggleReadableLineLength()"
-                                            class="relative w-10 h-5 rounded-full transition-colors cursor-pointer"
+                                            class="relative w-10 h-5 rounded-full transition-colors cursor-pointer flex-shrink-0"
                                             :style="readableLineLength ? 'background-color: var(--accent-primary)' : 'background-color: var(--bg-tertiary)'"
                                         >
                                             <div 
@@ -2194,11 +2194,11 @@
                                 
                                 <!-- Hide Underscore Folders Toggle -->
                                 <div class="mb-4">
-                                    <label class="flex items-center justify-between cursor-pointer">
-                                        <span class="text-xs font-medium" style="color: var(--text-secondary);" x-text="t('settings.hide_underscore_folders')"></span>
+                                    <label class="flex items-center justify-between gap-3 cursor-pointer">
+                                        <span class="text-xs font-medium flex-1 min-w-0" style="color: var(--text-secondary);" x-text="t('settings.hide_underscore_folders')"></span>
                                         <div 
                                             @click="toggleHideUnderscoreFolders()"
-                                            class="relative w-10 h-5 rounded-full transition-colors cursor-pointer"
+                                            class="relative w-10 h-5 rounded-full transition-colors cursor-pointer flex-shrink-0"
                                             :style="hideUnderscoreFolders ? 'background-color: var(--accent-primary)' : 'background-color: var(--bg-tertiary)'"
                                         >
                                             <div 
@@ -2212,11 +2212,11 @@
 
                                 <!-- Tab inserts tab -->
                                 <div class="mb-4">
-                                    <label class="flex items-center justify-between cursor-pointer">
-                                        <span class="text-xs font-medium" style="color: var(--text-secondary);" x-text="t('settings.tab_inserts_tab')"></span>
+                                    <label class="flex items-center justify-between gap-3 cursor-pointer">
+                                        <span class="text-xs font-medium flex-1 min-w-0" style="color: var(--text-secondary);" x-text="t('settings.tab_inserts_tab')"></span>
                                         <div 
                                             @click="toggleTabInsertsTab()"
-                                            class="relative w-10 h-5 rounded-full transition-colors cursor-pointer"
+                                            class="relative w-10 h-5 rounded-full transition-colors cursor-pointer flex-shrink-0"
                                             :style="tabInsertsTab ? 'background-color: var(--accent-primary)' : 'background-color: var(--bg-tertiary)'"
                                         >
                                             <div 
@@ -2252,11 +2252,11 @@
                                      applies to plain-note creation (folder/template have their
                                      own naming flows). Persisted as autoFillNoteTitle. -->
                                 <div class="mb-4">
-                                    <label class="flex items-center justify-between cursor-pointer">
-                                        <span class="text-xs font-medium" style="color: var(--text-secondary);" x-text="t('settings.auto_fill_note_title')"></span>
+                                    <label class="flex items-center justify-between gap-3 cursor-pointer">
+                                        <span class="text-xs font-medium flex-1 min-w-0" style="color: var(--text-secondary);" x-text="t('settings.auto_fill_note_title')"></span>
                                         <div
                                             @click="autoFillNoteTitle = !autoFillNoteTitle; localStorage.setItem('autoFillNoteTitle', autoFillNoteTitle)"
-                                            class="relative w-10 h-5 rounded-full transition-colors cursor-pointer"
+                                            class="relative w-10 h-5 rounded-full transition-colors cursor-pointer flex-shrink-0"
                                             :style="autoFillNoteTitle ? 'background-color: var(--accent-primary)' : 'background-color: var(--bg-tertiary)'"
                                         >
                                             <div
@@ -3123,7 +3123,7 @@
                                         class="flex items-center justify-between px-3 py-2 cursor-pointer"
                                         style="border-bottom: 1px solid var(--border-primary);"
                                     >
-                                        <span class="text-xs font-medium" style="color: var(--text-secondary);">
+                                        <span class="text-xs font-medium flex-1 min-w-0" style="color: var(--text-secondary);">
                                             ⚙️ Properties
                                         </span>
                                         <span class="text-xs opacity-40">▲ Collapse</span>