From 9a192c9b61da6e7480b6af5bc8e94ad427d13c8e Mon Sep 17 00:00:00 2001
From: tylen <tylen@vm-personal.com>
Date: Sun, 2 Nov 2025 00:29:21 +0200
Subject: [PATCH] frontend: add hosting tablr scroll indicator

---
 frontend/src/App.css                | 13 ++++++++++++-
 frontend/src/components/Hosting.tsx |  3 ++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index aa23a47..7197dbf 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -43,12 +43,23 @@ body {
     align-items: center;
 }
 
+.scroll-instruction {
+    display: none;
+}
+
 @media (max-width: 768px) {
     body {
         font-size: 1em;
     }
 }
 
+@media (max-width: 375px) {
+    .scroll-instruction {
+        display: block;
+    }
+}
+
+
 /* Header Style */
 header {
     background-color: #a41e34; /* Christmas red */
@@ -103,6 +114,7 @@ footer {
     position: relative;
 }
 
+
 .table-wrapper {
     width: 100%; /* Full width of the viewport */
     text-align: center; /* Center the text (optional for non-text elements) */
@@ -115,7 +127,6 @@ table {
     max-width: 100%;  /* Prevents exceeding the parent's width */
     color: black;
     border-collapse: collapse;
-    font-size: 1em;
     text-align: center; /* Centered text in table */
     margin: 0 auto; /* Center the table within the wrapper */
 }
diff --git a/frontend/src/components/Hosting.tsx b/frontend/src/components/Hosting.tsx
index 22bdcbf..823c160 100644
--- a/frontend/src/components/Hosting.tsx
+++ b/frontend/src/components/Hosting.tsx
@@ -53,7 +53,7 @@ function Hosting() {
             {loading && <div>Loading...</div>}
             {error && <div>Error</div>}
             {data && (
-                <div className="table-wrapper">
+                <div className="table-wrapper scroll-indicator">
                     <table>
                         <thead>
                             <tr>
@@ -72,6 +72,7 @@ function Hosting() {
                             ))}
                         </tbody>
                     </table>
+                    <p className="scroll-instruction">Таблицу можно скроллить</p>
                 </div>
             )}
             </CenteredContainer>