css: adapt TopBar and Lobby to smartphone

client/src/components/Lobby.vue

@@ -29,16 +29,24 @@ const { $t } = useI18n({
 
   &__message {
     flex-grow: 1;
-    margin: 60px 0 0 200px;
+    margin: 60px 48px 0 200px;
     font-family: $font-secondary;
     font-size: 24px;
     text-align: center;
     color: $text-primary-color;
+
+    @media (max-width: $phone-max-width) {
+      margin: 60px 48px;
+    }
   }
 
   &__players-list {
     width: 200px;
     margin: 16px 16px 0 0;
+
+    @media (max-width: $phone-width) {
+      display: none;
+    }
   }
 }
 </style>

client/src/components/TopBar.vue

@@ -76,7 +76,13 @@ const actionLogout = async () => {
     padding: 0 16px;
     text-align: center;
     color: $text-primary-color;
+  
   }
+  &__username {
+    @media (max-width: $phone-width) {
+      display: none;
+    }
+}
   
   &__actionbar {
     flex-grow: 1;
@@ -86,6 +92,12 @@ const actionLogout = async () => {
       color: $text-primary-color;
       font-size: 24px;
       text-align: center;
+
+      @media (max-width: $phone-width) {
+        margin-left: 24px;
+        text-align: left;
+        font-size: 20px;
+      }
     }
   }
 
@@ -94,6 +106,10 @@ const actionLogout = async () => {
     height: calc(64px - 2 * 16px);
     margin: 16px 0;
     background-color: $topbar-separator-color;
+
+    @media (max-width: $phone-width) {
+      display: none;
+    }
   }
 
   &__logout-button {
@@ -104,6 +120,10 @@ const actionLogout = async () => {
     &:hover {
       color: $text-primary-hover-color;
     }
+
+    @media (max-width: $phone-width) {
+      padding-right: 0;
+    }
   }
 }
 </style>