From 4eeab852847e3374f4d6d988a51a3328563dd5b3 Mon Sep 17 00:00:00 2001
From: Fovway <fovway@gmail.com>
Date: Sun, 2 Nov 2025 12:37:41 +0700
Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=8B=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20=D0=B8=20=D1=81?=
 =?UTF-8?q?=D1=82=D1=80=D1=83=D0=BA=D1=82=D1=83=D1=80=D0=B0=20=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D0=BE=D0=B2=20=D0=B7?=
 =?UTF-8?q?=D0=B0=D0=B3=D0=BE=D0=BB=D0=BE=D0=B2=D0=BA=D0=B0=20=D0=B8=20?=
 =?UTF-8?q?=D1=81=D0=BF=D0=B8=D1=81=D0=BA=D0=B0=20=D0=B7=D0=B0=D0=BC=D0=B5?=
 =?UTF-8?q?=D1=82=D0=BE=D0=BA.=20=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D1=81=D0=BF=D0=BE=D1=81=D0=BE=D0=B1=20=D0=BE=D1=82?=
 =?UTF-8?q?=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F=20=D1=84?=
 =?UTF-8?q?=D0=B8=D0=BB=D1=8C=D1=82=D1=80=D0=BE=D0=B2=20=D0=B2=20=D0=B7?=
 =?UTF-8?q?=D0=B0=D0=B3=D0=BE=D0=BB=D0=BE=D0=B2=D0=BA=D0=B5,=20=D0=B4?=
 =?UTF-8?q?=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=BD=D0=BE?=
 =?UTF-8?q?=D0=B2=D1=8B=D0=B5=20=D0=BA=D0=BB=D0=B0=D1=81=D1=81=D1=8B=20?=
 =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D1=8F=20=D0=B0=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D0=B2=D0=BD?=
 =?UTF-8?q?=D0=BE=D1=81=D1=82=D0=B8=20=D0=B8=20=D0=B2=D0=B8=D0=B7=D1=83?=
 =?UTF-8?q?=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE=D0=B3=D0=BE=20=D0=BE=D1=84=D0=BE?=
 =?UTF-8?q?=D1=80=D0=BC=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F.=20=D0=A3=D0=BF?=
 =?UTF-8?q?=D1=80=D0=BE=D1=89=D0=B5=D0=BD=20=D1=81=D1=82=D0=B8=D0=BB=D1=8C?=
 =?UTF-8?q?=20=D0=BF=D1=83=D1=81=D1=82=D0=BE=D0=B3=D0=BE=20=D1=81=D0=BE?=
 =?UTF-8?q?=D0=BE=D0=B1=D1=89=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=B2=20=D1=81?=
 =?UTF-8?q?=D0=BF=D0=B8=D1=81=D0=BA=D0=B5=20=D0=B7=D0=B0=D0=BC=D0=B5=D1=82?=
 =?UTF-8?q?=D0=BE=D0=BA=20=D0=B4=D0=BB=D1=8F=20=D0=BB=D1=83=D1=87=D1=88?=
 =?UTF-8?q?=D0=B5=D0=B3=D0=BE=20=D0=B2=D0=BE=D1=81=D0=BF=D1=80=D0=B8=D1=8F?=
 =?UTF-8?q?=D1=82=D0=B8=D1=8F.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Header.tsx   |  9 +++--
 src/components/notes/NotesList.tsx |  2 +-
 src/styles/style.css               | 57 +++++++++++++++++++++++++++---
 3 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 289ef10..82049d2 100644
--- a/src/components/layout/Header.tsx
+++ b/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>
           )}
diff --git a/src/components/notes/NotesList.tsx b/src/components/notes/NotesList.tsx
index 6e92156..1803268 100644
--- a/src/components/notes/NotesList.tsx
+++ b/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>
diff --git a/src/styles/style.css b/src/styles/style.css
index 9c07bdf..d0e73f4 100644
--- a/src/styles/style.css
+++ b/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 кнопки */