frontend: add hosting tablr scroll indicator

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 */
 }

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>