adjust spacing on configure tab on mobile (#3087)

src/core/client/stream/App/TabBar.css

@@ -1,6 +1,11 @@
 .smallTab {
   padding-top: var(--spacing-3);
   padding-bottom: var(--spacing-3);
+  padding-left: var(--spacing-3);
+  padding-right: var(--spacing-3);
+}
+
+.configureTab {
   padding-left: var(--spacing-4);
   padding-right: var(--spacing-4);
 }

src/core/client/stream/App/TabBar.tsx

@@ -122,7 +122,7 @@ const AppTabBar: FunctionComponent<Props> = (props) => {
 
           {props.showConfigureTab && (
             <Tab
-              className={cn(CLASSES.tabBar.configure, {
+              className={cn(CLASSES.tabBar.configure, styles.configureTab, {
                 [styles.smallTab]: !matches,
               })}
               tabID="CONFIGURE"
@@ -135,10 +135,7 @@ const AppTabBar: FunctionComponent<Props> = (props) => {
                 </Localized>
               ) : (
                 <div>
-                  <Icon size="lg">settings</Icon>
-                  <Localized id="general-tabBar-configure">
-                    <div className={styles.smallText}>Configure</div>
-                  </Localized>
+                  <Icon size="md">settings</Icon>
                 </div>
               )}
             </Tab>

src/core/client/ui/components/v2/Tabs/TabBar.css

@@ -4,6 +4,7 @@ $moderateCardTabSecondaryColor: var(--palette-divider);
 
 .root {
   display: flex;
+  align-items: flex-end;
   padding: 0;
   margin: 0;
 }