Обновлены стили и структура компонентов заголовка и списка заметок. Изменен способ отображения фильтров в заголовке, добавлены новые классы для улучшения адаптивности и визуального оформления. Упрощен стиль пустого сообщения в списке заметок для лучшего восприятия.

src/components/layout/Header.tsx

@@ -104,11 +104,10 @@ export const Header: React.FC<HeaderProps> = ({
             <Icon icon="mdi:note-text" /> Мои заметки
           </span>
           {hasFilters && (
-            <div
-              className="filter-indicator"
-              style={{ display: "inline-block" }}
-            >
-              Фильтр: {activeFilters.join(", ")}{" "}
+            <div className="filter-indicator">
+              <span className="filter-indicator-text">
+                Фильтр: {activeFilters.join(", ")}
+              </span>{" "}
               <button onClick={handleClearFilters}>✕</button>
             </div>
           )}

src/components/notes/NotesList.tsx

@@ -111,7 +111,7 @@ export const NotesList = forwardRef<NotesListRef>((props, ref) => {
 
     return (
       <div className="notes-container">
-        <p style={{ textAlign: "center", color: "#999", marginTop: "50px" }}>
+        <p className="empty-message">
           {message}
         </p>
       </div>

src/styles/style.css

@@ -406,7 +406,8 @@ header {
 }
 
 .filter-indicator {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   margin-top: 5px;
   padding: 4px 10px;
   background-color: rgba(var(--accent-color-rgb), 0.1);
@@ -415,6 +416,15 @@ header {
   font-size: 12px;
   color: var(--accent-color);
   font-weight: 500;
+  max-width: 300px;
+}
+
+.filter-indicator-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
 }
 
 .filter-indicator button {
@@ -424,12 +434,20 @@ header {
   cursor: pointer;
   margin-left: 8px;
   font-weight: bold;
-  padding: 0;
+  padding: 2px 4px;
   font-size: 14px;
+  border-radius: 3px;
+  min-width: 20px;
+  min-height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
 }
 
 .filter-indicator button:hover {
   color: #ff6b6b;
+  background-color: rgba(255, 107, 107, 0.1);
 }
 
 .user-info {
@@ -694,6 +712,17 @@ header {
   margin-top: 8px;
 }
 
+.empty-message {
+  text-align: center;
+  color: #999;
+  margin-top: 50px;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
 .login-form {
   margin-top: 20px;
 }
@@ -4701,6 +4730,12 @@ textarea:focus {
     gap: 16px; /* Отступ между заметками на мобильных */
   }
 
+  /* Стили для пустого сообщения на мобильных */
+  .empty-message {
+    padding: 0 15px;
+    font-size: 14px;
+  }
+
   /* Header адаптация */
   .notes-header {
     gap: 10px;
@@ -4708,8 +4743,9 @@ textarea:focus {
   }
 
   .notes-header-left {
-    width: 100%;
-    flex-direction: column;
+    width: auto;
+    min-width: 0;
+    /* flex-direction: column; */
     align-items: flex-start;
     gap: 8px;
   }
@@ -4721,7 +4757,18 @@ textarea:focus {
   /* Фильтры */
   .filter-indicator {
     font-size: 12px;
-    width: 100%;
+    display: inline-flex !important;
+    width: auto !important;
+    min-width: 0 !important;
+    flex: 0 0 auto !important;
+    align-self: flex-start !important;
+    box-sizing: border-box !important;
+  }
+
+  .filter-indicator-text {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
   }
 
   /* Markdown кнопки */