Remove unused parts of the welcome box and restyle with flexbox (#5348)

Author: ericawright

src/components/WelcomeBox.css

@@ -23,14 +23,6 @@
   background-color: var(--theme-body-background);
 }
 
-.alignlabel {
-  display: inline-block;
-}
-
-.welcomebox .normal-layout {
-  display: none;
-}
-
 .welcomebox .command-bar-button {
   position: absolute;
   top: auto;
@@ -39,43 +31,42 @@
   bottom: 0;
 }
 
+.alignlabel {
+  display: flex;
+  white-space: nowrap;
+}
+
 .shortcutKeys {
-  text-align: right;
-  float: left;
   font-family: Courier;
 }
 
+.shortcutKey,
+.shortcutLabel {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .shortcutKey {
-  display: inline-block;
-  margin-right: 10px;
+  text-align: right;
+  padding-right: 10px;
   font-family: Courier;
 }
 
-.shortcutFunction {
+.shortcutLabel {
   text-align: left;
-  float: left;
-  margin-left: 25px;
-  color: var(--theme-comment);
+  padding-left: 10px;
 }
 
-html .welcomebox .toggle-button-end.collapsed {
-  bottom: 1px;
+.shortcutFunction {
+  flex: 1;
+  color: var(--theme-comment);
 }
 
-@media (max-width: 430px) {
-  .welcomebox .small-size-layout {
-    display: inline-block;
-  }
-
-  .welcomebox .normal-layout {
-    display: none;
-  }
-
-  .shortcutFunction {
-    margin-left: 0;
-  }
+.shortcutFunction p {
+  display: flex;
+}
 
-  .shortcutKey {
-    display: block;
-  }
+html .welcomebox .toggle-button-end.collapsed {
+  bottom: 1px;
 }

src/components/WelcomeBox.js

@@ -57,33 +57,19 @@ class WelcomeBox extends Component<Props> {
 
     return (
       <div className="welcomebox">
-        <div className="alignlabel small-size-layout">
+        <div className="alignlabel">
           <div className="shortcutFunction">
             <p onClick={() => openQuickOpen()}>
               <span className="shortcutKey">{searchSourcesShortcut}</span>
-              {searchSourcesLabel}
+              <span className="shortcutLabel">{searchSourcesLabel}</span>
             </p>
             <p onClick={setActiveSearch.bind(null, "project")}>
               <span className="shortcutKey">{searchProjectShortcut}</span>
-              {searchProjectLabel}
+              <span className="shortcutLabel">{searchProjectLabel}</span>
             </p>
           </div>
           {this.renderToggleButton()}
         </div>
-        <div className="alignlabel normal-layout">
-          <div className="shortcutKeys">
-            <p onClick={() => openQuickOpen()}>{searchSourcesShortcut}</p>
-            <p onClick={setActiveSearch.bind(null, "project")}>
-              {searchProjectShortcut}
-            </p>
-          </div>
-          <div className="shortcutFunction">
-            <p onClick={() => openQuickOpen()}>{searchSourcesLabel}</p>
-            <p onClick={setActiveSearch.bind(null, "project")}>
-              {searchProjectLabel}
-            </p>
-          </div>
-        </div>
       </div>
     );
   }