Fix mobile viewport overflow while maintaining consistent button styling

frontend/src/App.css

@@ -1,5 +1,7 @@
 .App {
   text-align: center;
+  max-width: 100vw;
+  overflow-x: hidden;
 }
 
 .AppContainer {
@@ -9,4 +11,6 @@
   flex-direction: column;
   width: 100%;
   height: 100%;
+  max-width: 100vw;
+  overflow-x: hidden;
 }

frontend/src/index.css

@@ -5,6 +5,13 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
+  max-width: 100vw;
+}
+
+html {
+  overflow-x: hidden;
+  max-width: 100vw;
 }
 
 code {

frontend/src/styles/Minecraft.css

@@ -36,6 +36,8 @@ body {
   height: 100vh;
   justify-content: center;
   position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 button {
@@ -86,6 +88,9 @@ button {
     'lang fourth 		.'
   ;
   grid-gap: 8px;
+  max-width: 100vw;
+  padding: 0 10px;
+  box-sizing: border-box;
 }
 
 .menu :nth-child(1) {grid-area: first;}
@@ -120,6 +125,9 @@ button {
   '.    sixth 		.'
 ;
 grid-gap: 8px;
+max-width: 100vw;
+padding: 0 10px;
+box-sizing: border-box;
 }
 
 .menu-register :nth-child(1) {grid-area: first;}
@@ -141,6 +149,9 @@ grid-gap: 8px;
   '. 		second 		.'
 ;
 grid-gap: 8px;
+max-width: 100vw;
+padding: 0 10px;
+box-sizing: border-box;
 }
 .menu-dashboard :nth-child(1) {grid-area: first;}
 .menu-dashboard .double {grid-area: second;}
@@ -204,4 +215,14 @@ grid-gap: 8px;
 
 .error-message {
   color: red;
+}
+
+/* Mobile responsive styles */
+@media (max-width: 480px) {
+  .menu,
+  .menu-register,
+  .menu-dashboard {
+    grid-template-columns: var(--btn-size) calc(100vw - calc(var(--btn-size) * 2) - 36px) var(--btn-size);
+    padding: 0 10px;
+  }
 }

frontend/src/styles/TitleImage.css

@@ -2,4 +2,21 @@
   height: 100px;
   margin-bottom: 50px;
   cursor: pointer;
+  max-width: calc(100vw - 40px);
+  object-fit: contain;
+}
+
+@media (max-width: 768px) {
+  .title-image {
+    height: 80px;
+    margin-bottom: 30px;
+  }
+}
+
+@media (max-width: 480px) {
+  .title-image {
+    height: 60px;
+    margin-bottom: 20px;
+    max-width: calc(100vw - 20px);
+  }
 }

frontend/src/styles/UserTable.css

@@ -3,9 +3,12 @@ table {
   display: block;
   max-height: 300px;
   overflow-y: auto;
+  overflow-x: auto;
   table-layout: fixed;
   border-collapse: collapse;
   font-size: 16px;
+  width: 100%;
+  max-width: calc(100vw - 40px);
 }
 
 button {
@@ -39,6 +42,54 @@ td:nth-child(3), td:nth-child(4) {
 @media (max-width: 600px) {
   table {
     font-size: 14px;
+    max-width: calc(100vw - 40px);
+  }
+
+  th, td {
+    padding: 0 4px;
+    font-size: 12px;
+  }
+
+  button {
+    font-size: 11px;
+    padding: 2px 4px;
+  }
+
+  input[type="checkbox"] {
+    margin-left: 8px;
+  }
+}
+
+@media (max-width: 480px) {
+  table {
+    font-size: 12px;
+    max-width: calc(100vw - 30px);
+  }
+
+  th, td {
+    padding: 0 3px;
+    font-size: 11px;
+  }
+
+  button {
+    font-size: 10px;
+    padding: 2px 3px;
+  }
+
+  input[type="checkbox"] {
+    margin-left: 5px;
+  }
+
+  /* Make columns narrower on very small screens */
+  th:nth-child(1), td:nth-child(1) {
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  th:nth-child(2), td:nth-child(2) {
+    max-width: 60px;
   }
 }
 
@@ -55,4 +106,7 @@ td:nth-child(3), td:nth-child(4) {
   align-items: center;
   justify-content: center;
   flex-direction: column;
+  max-width: 100vw;
+  box-sizing: border-box;
+  padding: 10px;
 }