fix: cleanup misc overflow styles

samuelmaddock · Jul 7, 2020 · 28aa1fe · 28aa1fe
1 parent f9cd14f
commit 28aa1fe
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 22 deletions.
diff --git a/packages/metastream-app/src/components/common/button.css b/packages/metastream-app/src/components/common/button.css
@@ -58,23 +58,23 @@
 }
 
 .medium {
-  padding: 0 12px;
-  height: 40px;
-  font-size: 18px;
+  padding: 0 0.75rem;
+  height: 2.5rem;
+  font-size: 1.125rem;
 }
 
 .medium svg {
-  margin-right: 10px;
+  margin-right: 0.625rem;
 }
 
 .large {
-  padding: 10px 16px;
-  height: 60px;
-  font-size: 24px;
+  padding: 0.625rem 1rem;
+  height: 3.75rem;
+  font-size: 1.5rem;
 }
 
 .large svg {
-  margin-right: 14px;
+  margin-right: 0.875rem;
 }
 
 .tooltip {

diff --git a/packages/metastream-app/src/components/lobby/PanelHeader.css b/packages/metastream-app/src/components/lobby/PanelHeader.css
@@ -11,6 +11,8 @@
   composes: row-center from '~styles/layout.css';
   flex-grow: 1;
   padding-right: 0;
+  min-width: 0;
+  height: 100%;
 }
 
 .title {

diff --git a/packages/metastream-app/src/components/lobby/modals/SessionSettings.css b/packages/metastream-app/src/components/lobby/modals/SessionSettings.css
@@ -14,6 +14,12 @@
   display: block;
 }
 
+.sessionModes {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
 .sessionMode button:not(:first-of-type) {
   margin-left: 1rem;
 }

diff --git a/packages/metastream-app/src/components/lobby/modals/SessionSettings.tsx b/packages/metastream-app/src/components/lobby/modals/SessionSettings.tsx
@@ -120,19 +120,21 @@ class SessionSettings extends Component<PrivateProps, IState> {
     return (
       <p className={styles.sessionMode}>
         <label className={styles.label}>{t('sessionMode')}</label>
-        {modes.map(mode => (
-          <HighlightButton
-            key={mode.label}
-            icon={mode.icon}
-            size="large"
-            highlight={sessionMode === mode.mode}
-            onClick={() => mode.onClick(mode.mode)}
-            onMouseEnter={() => this.setState({ previewMode: mode.mode })}
-            onMouseLeave={() => this.setState({ previewMode: undefined })}
-          >
-            {mode.label}
-          </HighlightButton>
-        ))}
+        <div className={styles.sessionModes}>
+          {modes.map(mode => (
+            <HighlightButton
+              key={mode.label}
+              icon={mode.icon}
+              size="large"
+              highlight={sessionMode === mode.mode}
+              onClick={() => mode.onClick(mode.mode)}
+              onMouseEnter={() => this.setState({ previewMode: mode.mode })}
+              onMouseLeave={() => this.setState({ previewMode: undefined })}
+            >
+              {mode.label}
+            </HighlightButton>
+          ))}
+        </div>
         {selectedMode && <label className={styles.descLabel}>{selectedMode.desc}</label>}
       </p>
     )

diff --git a/packages/metastream-app/src/locale/ru.ts b/packages/metastream-app/src/locale/ru.ts
@@ -94,7 +94,7 @@ export default {
   unlimited: 'Неограниченный',
   unlockQueue: 'Разблокировать очередь',
   username: 'Имя пользователя',
-  users: '',
+  users: 'Пользователь',
   userJoined: '<Username id="{{userId}}">{{username}}</Username> присоеденился',
   userLeft: '<Username id="{{userId}}">{{username}}</Username> вышел',
   viewOnGitHub: 'Посмотреть на GitHub',