Set clickable area for skinny buttons and tabs

CHANGELOG.md

@@ -18,6 +18,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Updated buttons and tabs styling (#296)
 - Updated icons (#296)
 - Bump engine.io from 6.2.0 to 6.2.1 (#272)
+- Increased clickable area for tabs (#299)
 
 ### Fixed
 

src/components/Editor/Project/Project.js

@@ -62,7 +62,9 @@ const Project = (props) => {
           <Tabs>
             <TabList>
               { project.components.map((file, i) => (
-                  <Tab key={i}>{file.name}.{file.extension}</Tab>
+                  <Tab key={i}>
+                    <span className='react-tabs__tab-inner'>{file.name}.{file.extension}</span>
+                  </Tab>
                 )
               )}
             </TabList>

src/components/Editor/Runners/PythonRunner/PythonRunner.js

@@ -311,7 +311,9 @@ const PythonRunner = () => {
           {hasVisualOutput ? <div className='output-panel output-panel--visual'>
             <Tabs forceRenderTabPanel={true}>
               <TabList>
-                <Tab key={0}>{t('output.visualOutput')}</Tab>
+                <Tab key={0}>
+                  <span className='react-tabs__tab-inner'>{t('output.visualOutput')}</span>
+                </Tab>
                 {!isEmbedded ? <OutputViewToggle/> : null }
               </TabList>
               <TabPanel key={0} >
@@ -322,7 +324,9 @@ const PythonRunner = () => {
           <div className='output-panel output-panel--text'>
             <Tabs forceRenderTabPanel={true}>
               <TabList>
-                <Tab key={0}>{t('output.textOutput')}</Tab>
+                <Tab key={0}>
+                  <span className='react-tabs__tab-inner'>{t('output.textOutput')}</span>
+                </Tab>
                 { hasVisualOutput || isEmbedded ? null : <OutputViewToggle /> }
               </TabList>
               <ErrorMessage />
@@ -336,9 +340,13 @@ const PythonRunner = () => {
       <Tabs forceRenderTabPanel={true} defaultIndex={hasVisualOutput ? 0 : 1}>
         <TabList>
           {hasVisualOutput ?
-            <Tab key={0}>{t('output.visualOutput')}</Tab> : null
+            <Tab key={0}>
+              <span className='react-tabs__tab-inner'>{t('output.visualOutput')}</span>
+            </Tab> : null
           }
-          <Tab key={1}>{t('output.textOutput')}</Tab>
+          <Tab key={1}>
+            <span className='react-tabs__tab-inner'>{t('output.textOutput')}</span>
+          </Tab>
           {!isEmbedded ? <OutputViewToggle/> : null }
         </TabList>
         <ErrorMessage />

src/components/Editor/Runners/PythonRunner/PythonRunner.test.js

@@ -489,7 +489,7 @@ test('Tabbed view has text and visual tabs with same parent element', () => {
     }
     const store = mockStore(initialState);
     render(<Provider store={store}><PythonRunner /></Provider>)
-    expect(screen.getByText('output.visualOutput').parentElement).toEqual(screen.getByText('output.textOutput').parentElement)
+    expect(screen.getByText('output.visualOutput').parentElement.parentElement).toEqual(screen.getByText('output.textOutput').parentElement.parentElement)
 })
 
 test('Split view has text and visual tabs with different parent elements', () => {

src/components/EmbeddedViewer/__snapshots__/EmbeddedViewer.test.js.snap

@@ -33,7 +33,11 @@ exports[`Renders without crashing 1`] = `
               role="tab"
               tabindex="0"
             >
-              output.textOutput
+              <span
+                class="react-tabs__tab-inner"
+              >
+                output.textOutput
+              </span>
             </li>
             <div
               class="output-view-toggle"

src/tabs.scss

@@ -1,20 +1,44 @@
 @import './colours.scss';
 @import './components/Button/Button.scss';
 
+$spacing-eight: calc(var(--spacing-1) / 1.25);
+$spacing-four: calc($spacing-eight / 2);
+
 #app, #wc {
   .react-tabs {
     flex: 1;
     display: flex;
     flex-flow: column;
     overflow: hidden;
     position: relative;
-  
-    &__tab {
+
+    &__tab-inner {
       @extend .btn;
       @extend .btn--secondary;
 
+      border: 3px solid transparent;
+      margin: $spacing-eight $spacing-four;
+      padding: $spacing-four var(--spacing-1);
+    }
+
+    &__tab {
+      border: none;
+      background-color: transparent;
+      padding: 0;
+      margin: 0;
+
       &--selected {
-        border: 3px solid $rpf-teal-shade-20;
+        border-radius: 0;
+
+        .react-tabs__tab-inner {
+          border: 3px solid $rpf-teal-shade-20;
+        }
+      }
+
+      &:hover {
+        .react-tabs__tab-inner {
+          background-color: $rpi-grey-40;
+        }
       }
 
       &:focus {
@@ -23,11 +47,27 @@
 
       &:focus-visible {
         outline: none;
+
+        .react-tabs__tab-inner {
+          border: 3px solid $rpf-brand-raspberry;
+        }
       }
 
       &:focus:after {
         display: none;
-       }
+      }
+
+      &:first-of-type {
+        .react-tabs__tab-inner {
+          margin-left: $spacing-eight;
+        }
+      }
+
+      &:last-of-type {
+        .react-tabs__tab-inner {
+          margin-right: $spacing-eight;
+        }
+      }
     }
 
     &__tab-list {
@@ -51,7 +91,9 @@
 
       &__tab {
         &--selected {
-          background-color: $rpi-grey-5;
+          .react-tabs__tab-inner {
+            background-color: $rpi-grey-5;
+          }
         }
       }
     }
@@ -66,18 +108,26 @@
       }
 
       &__tab {
-        background-color: $rpf-darkmode-grey32;
-        color: $rpf-white;
-
         &:hover {
-          background-color: $rpf-darkmode-grey22;
+          .react-tabs__tab-inner {
+            background-color: $rpf-darkmode-grey22;
+          }
         }
 
         &--selected {
-          color: inherit;
-          background-color: $rpf-darkmode-grey42;
+          color: $rpf-white;
+
+          .react-tabs__tab-inner {
+            color: inherit;
+            background-color: $rpf-darkmode-grey42;
+          }
         }
       }
+
+      &__tab-inner {
+        background-color: $rpf-darkmode-grey32;
+        color: $rpf-white;
+      }
     }
   }
 }