Fix tabs scroll

website/editor/src/components/SecondanaryTabs.js

@@ -8,54 +8,36 @@ import {createComponent} from 'effector-react'
 import {createApi, createStore, createStoreObject, Store} from 'effector'
 
 const tab: Store<'console'> = createStore('console')
-// tab.on(stats, (tab, {event, store, effect, domain}) => {
-//   if (event.length > 0) return 'events'
-//   if (store.length > 0) return 'storages'
-//   if (effect.length > 0) return 'effects'
-//   if (domain.length > 0) return 'domains'
-//   return 'events'
-// })
 const api = createApi(tab, {
-  // showEvents: () => 'events',
-  // showStorages: () => 'storages',
-  // showEffects: () => 'effects',
-  // showDomains: () => 'domains',
   showConsole: () => 'console',
 })
 
+const Tab = styled.li`
+  border-right: 1px solid #ddd;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: bold;
+  padding: 7px 15px;
+  margin: 0;
+  background-color: ${({isActive}) => (isActive ? 'white' : 'inherit')};
+  border-bottom: ${({isActive}) => (isActive ? '1px solid #fff' : 'none')};
+  margin-bottom: ${({isActive}) => (isActive ? '-1px' : '0')};
+`
+
 const TabContent = styled('div')`
   overflow: auto;
 `
 
-const TabView = createComponent(tab, ({}, tab) => {
-  //TODO: unify this
-  const className = `tab-content ${cx(
-    // tab === 'events' && 'show-events',
-    // tab === 'storages' && 'show-storages',
-    // tab === 'effects' && 'show-effects',
-    // tab === 'domains' && 'show-domains',
-    tab === 'console' && 'show-console',
-  )}`
-  const mapper = item => {
-    const name = item?.compositeName?.fullName || item?.shortName || item.id
-    return <li key={item.kind + item.id + name}>{name}</li>
-  }
-  return <TabContent>{tab === 'console' && <LogsView />}</TabContent>
-})
+const TabView = createComponent(tab, ({}, tab) => (
+  <TabContent>{tab === 'console' && <LogsView />}</TabContent>
+))
 
 const ToolbarView = createComponent(tab, ({}, tab) => {
-  const className = `toolbar ${cx(
-    // tab === 'events' && 'show-events',
-    // tab === 'storages' && 'show-storages',
-    // tab === 'effects' && 'show-effects',
-    // tab === 'domains' && 'show-domains',
-    tab === 'console' && 'show-console',
-  )}`
   return (
-    <ul className={className}>
-      <li onClick={api.showConsole} className="tab console-tab">
+    <ul className="toolbar">
+      <Tab onClick={api.showConsole} isActive={tab === 'console'}>
         Console
-      </li>
+      </Tab>
     </ul>
   )
 })

website/editor/src/styles.css

@@ -44,23 +44,9 @@ body {
   list-style: none;
   margin: 0;
   padding: 0;
+  display: flex;
 }
 
-.toolbar.show-console .console-tab {
-  background: #fff;
-  border-bottom: 1px solid #fff;
-  margin-bottom: -1px;
-}
-
-.toolbar .tab {
-  border-right: 1px solid #ddd;
-  cursor: pointer;
-  float: left;
-  font-size: 14px;
-  font-weight: bold;
-  padding: 7px 15px;
-  margin: 0;
-}
 /* .stats > div {
   flex: 1;
   padding: 10px;
@@ -85,10 +71,8 @@ body {
 .header-tabs {
   border-left: 1px solid #ddd;
   background-color: #f7f7f7;
-}
-.header-tabs.toolbar.show-graphite .graphite-tab,
-.header-tabs.toolbar.show-dom .dom-tab {
-  background: #fff;
+  height: 35px;
+  overflow-y: auto;
 }
 
 .dom {

website/editor/src/view.js

@@ -92,7 +92,6 @@ const VersionLinkView = createComponent(version, ({}, version) => (
 const TabHeader = styled.li`
   border-right: 1px solid #ddd;
   cursor: pointer;
-  float: left;
   font-size: 14px;
   font-weight: bold;
   padding: 7px 15px;
@@ -102,13 +101,7 @@ const TabHeader = styled.li`
 
 const TabsView = createComponent(tab, (_, tab) => (
   <>
-    <ul
-      className={cx(
-        tab === 'graphite' && 'show-graphite',
-        tab === 'dom' && 'show-dom',
-        'toolbar',
-        'header-tabs',
-      )}>
+    <ul className={cx('toolbar', 'header-tabs')}>
       <Media query="(max-width: 699px)">
         <>
           <TabHeader onClick={tabApi.showEditor} isActive={tab === 'editor'}>