From 4e047f3aa02d6a1796f3e9d81cb0e0c63353455e Mon Sep 17 00:00:00 2001
From: mrleo1nid <43583385+mrleo1nid@users.noreply.github.com>
Date: Sun, 25 Oct 2026 03:48:57 +0300
Subject: [PATCH] UI: wrap long game titles, shorten library search placeholder

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 frontend/src/pages/Library.tsx | 2 +-
 frontend/src/styles.css        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/Library.tsx b/frontend/src/pages/Library.tsx
index cd5a6ac..6f05a88 100644
--- a/frontend/src/pages/Library.tsx
+++ b/frontend/src/pages/Library.tsx
@@ -125,7 +125,7 @@ export function Library() {
       <div className="toolbar" style={{ marginTop: shelf.length && !filtering ? "var(--space-5)" : 0 }}>
         <div className="search">
           <Icon name="search" size={20} />
-          <input type="search" placeholder="Поиск по названию, описанию или тегу…" value={query}
+          <input type="search" placeholder="Поиск по играм и тегам…" value={query}
                  onChange={(e) => setQuery(e.target.value)} aria-label="Поиск" />
         </div>
         <select value={sort} onChange={(e) => changeSort(e.target.value as Sort)} aria-label="Сортировка"
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 02da517..47f50b9 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -554,7 +554,7 @@ input[type="file"] { padding: 0.4rem; }
 .game-card-media .badge-warn { color: #ffb066; }
 .game-card-media .badge-error { color: #ff8588; }
 .game-card-body { padding: 0.75rem 0.9rem 0.9rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
-.game-card-title { font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.game-card-title { overflow-wrap: anywhere; font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .game-card-meta { margin-top: auto; font-size: 0.82rem; color: var(--muted); }
 
 .cover {