try to fit hub name on one line. refactor

src/assets/stylesheets/footer.scss

@@ -59,7 +59,28 @@
   margin: 16px 24px;
   display: flex;
   align-items: center;
+  @media (max-width: 768px) {
+    margin: 16px 8px;
+    font-size: 0.9em;
+  }
+}
+:local(.hub-stats) {
+  text-align: right;
+  margin: 16px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  @media (min-width: 768px) {
+    flex: 1;
+  }
+  @media (max-width: 768px) {
+    margin: 16px 8px;
+  }
+  :local(.hub-participant-count) {
+    margin: 0 12px;
+  }
 }
+
 :local(.menu) {
   padding: 5px 0;
   background-color: rgba(0, 0, 0, 0.85);
@@ -84,32 +105,21 @@
     flex: 1;
     align-self: center;
   }
-}
-:local(.menu-button__icon) {
-  background: black;
-  width: 40px !important;
-  height: 40px;
-  border: 3px solid white;
-  border-radius: 40px;
-  display: inline-block;
-  font-size: 22px;
-  vertical-align: sub;
-  line-height: 42px;
-  svg {
-    margin-left: 0px;
+  :local(.menu-button__icon) {
+    background: black;
+    width: 40px !important;
+    height: 40px;
+    border: 3px solid white;
+    border-radius: 40px;
+    display: inline-block;
+    font-size: 22px;
+    vertical-align: sub;
+    line-height: 42px;
+    svg {
+      margin-left: 0px;
+    }
+  }
+  :local(.menu-button__text) {
+    margin-left: 16px;
   }
-}
-:local(.menu-button__text) {
-  margin-left: 16px;
-}
-:local(.hub-stats) {
-  text-align: right;
-  margin: 16px 24px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex: 1;
-}
-:local(.hub-participant-count) {
-  margin: 0 12px;
 }