diff --git a/frontend/src/App.css b/frontend/src/App.css index ead0934..85ebbd9 100644 --- a/frontend/src/App.css +++ b/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; } \ No newline at end of file diff --git a/frontend/src/index.css b/frontend/src/index.css index ec2585e..aecdd5c 100644 --- a/frontend/src/index.css +++ b/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 { diff --git a/frontend/src/styles/Minecraft.css b/frontend/src/styles/Minecraft.css index a31124d..c1cd7f2 100644 --- a/frontend/src/styles/Minecraft.css +++ b/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; + } } \ No newline at end of file diff --git a/frontend/src/styles/TitleImage.css b/frontend/src/styles/TitleImage.css index ee5a510..c76bc51 100644 --- a/frontend/src/styles/TitleImage.css +++ b/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); + } } \ No newline at end of file diff --git a/frontend/src/styles/UserTable.css b/frontend/src/styles/UserTable.css index 94987e3..dc0b79c 100644 --- a/frontend/src/styles/UserTable.css +++ b/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; } \ No newline at end of file