Fix JS width (dropdown breaking out) (#4357)

* Fix JS width (dropdown breaking out)

* Adjust HelpOverlay

packages/page-accounts/src/index.tsx

@@ -24,7 +24,7 @@ function AccountsApp ({ basePath, onStatusChange }: Props): React.ReactElement<P
   const { hasAccounts } = useAccounts();
   const { isIpfs } = useIpfs();
 
-  const itemsRef = useRef([
+  const tabsRef = useRef([
     {
       isRoot: true,
       name: 'overview',
@@ -43,7 +43,7 @@ function AccountsApp ({ basePath, onStatusChange }: Props): React.ReactElement<P
         <Tabs
           basePath={basePath}
           hidden={(hasAccounts && !isIpfs) ? undefined : HIDDEN_ACC}
-          items={itemsRef.current}
+          items={tabsRef.current}
         />
       </header>
       <Switch>

packages/page-js/src/Playground.tsx

@@ -10,7 +10,7 @@ import type { Log, LogType, Snippet } from './types';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
-import { Button, Dropdown, Editor } from '@polkadot/react-components';
+import { Button, Dropdown, Editor, Tabs } from '@polkadot/react-components';
 import { useApi, useToggle } from '@polkadot/react-hooks';
 import * as types from '@polkadot/types';
 import uiKeyring from '@polkadot/ui-keyring';
@@ -73,7 +73,7 @@ function setupInjected ({ api, isDevelopment }: ApiProps, setIsRunning: (isRunni
 }
 
 // FIXME This... ladies & gentlemen, is a mess that should be untangled
-function Playground ({ className = '' }: Props): React.ReactElement<Props> {
+function Playground ({ basePath, className = '' }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const apiProps = useApi();
   const injectedRef = useRef<Injected | null>(null);
@@ -86,6 +86,14 @@ function Playground ({ className = '' }: Props): React.ReactElement<Props> {
   const [options, setOptions] = useState<Snippet[]>([]);
   const [selected, setSelected] = useState(snippets[0]);
 
+  const tabsRef = useRef([
+    {
+      isRoot: true,
+      name: 'playground',
+      text: t<string>('Javascript')
+    }
+  ]);
+
   // initialize all options
   useEffect((): void => {
     // add snippets if not already available (global)
@@ -226,7 +234,13 @@ function Playground ({ className = '' }: Props): React.ReactElement<Props> {
 
   return (
     <main className={`js--App ${className}`}>
-      <header className='container'>
+      <header>
+        <Tabs
+          basePath={basePath}
+          items={tabsRef.current}
+        />
+      </header>
+      <section className='js--Selection'>
         <Dropdown
           className='js--Dropdown'
           isFull
@@ -235,7 +249,7 @@ function Playground ({ className = '' }: Props): React.ReactElement<Props> {
           options={options}
           value={selected.value}
         />
-      </header>
+      </section>
       <section className='js--Content'>
         <article className='container js--Editor'>
           <ActionButtons
@@ -287,7 +301,6 @@ export default React.memo(styled(Playground)`
   display: flex;
   flex-direction: column;
   height: 100vh;
-  padding: 1rem 0 0;
   position: relative;
 
   article {
@@ -296,6 +309,10 @@ export default React.memo(styled(Playground)`
     }
   }
 
+  .js--Selection {
+    margin-bottom: 1rem;
+  }
+
   .js--Content {
     align-content: stretch;
     align-items: stretch;

packages/react-components/src/FilterOverlay.tsx

@@ -32,7 +32,7 @@ export default React.memo(styled(FilterOverlay)`
     display: flex;
     justify-content: flex-end;
     position: absolute;
-    top: 0.525rem;
+    top: 0.25rem;
 
     > div {
       max-width: 35rem !important;

packages/react-components/src/HelpOverlay.tsx

@@ -49,13 +49,13 @@ export default React.memo(styled(HelpOverlay)(({ theme }: ThemeProps) => `
     color: ${theme.color};
     cursor: pointer;
     font-size: 2rem;
-    padding: 1rem 1.5rem 0 0;
+    padding: 0.65rem 1.5rem 0 0;
   }
 
   > .help-button {
     position: absolute;
     right: 0rem;
-    top: 0.125rem;
+    top: 0rem;
   }
 
   .help-slideout {

packages/react-components/src/Tabs/index.tsx

@@ -73,7 +73,7 @@ export default React.memo(styled(Tabs)(({ theme }: ThemeProps) => `
     margin: 0 auto;
     width: 100%;
     display: flex;
-    padding: 1.5rem 1.5rem 0;
+    padding: 1.25rem 1.5rem 0;
   }
 
   &::-webkit-scrollbar {