links: fix aggressive overflow scrolling on tab bar

pkg/interface/src/views/apps/links/components/link-detail.js

@@ -1,13 +1,13 @@
-import React, { Component, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { TabBar } from '~/views/components/chat-link-tabbar';
 import { LinkPreview } from './lib/link-preview';
-import { LinkSubmit } from './lib/link-submit';
 import { CommentSubmit } from './lib/comment-submit';
 import { SidebarSwitcher } from '~/views/components/SidebarSwitch';
 import { Link } from 'react-router-dom';
 import { Comments } from './lib/comments';
 import { getContactDetails } from '~/logic/lib/util';
 
+import { Box } from '@tlon/indigo-react';
 
 export const LinkDetail = (props) => {
   if (!props.node && props.graphResource) {
@@ -35,24 +35,30 @@ export const LinkDetail = (props) => {
 
   return (
     <div className="h-100 w-100 overflow-hidden flex flex-column">
-      <div
+      <Box
-        className={
+        pl='12px'
-          'pl4 pt2 flex relative overflow-x-scroll ' +
+        pt='2'
-          'overflow-x-auto-l overflow-x-auto-xl flex-shrink-0 ' +
+        display='flex'
-          'bb bn-m bn-l bn-xl b--gray4'
+        position='relative'
-        }
+        overflowX={['scroll', 'auto']}
-        style={{ height: 48 }}>
+        flexShrink='0'
+        borderBottom='1px solid'
+        borderColor='washedGray'
+        height='48px'
+      >
         <SidebarSwitcher
           sidebarShown={props.sidebarShown}
           popout={props.popout}
           api={props.api}
         />
         <Link className="dib f9 fw4 pt2 gray2 lh-solid"
-              to={`/~link/${resourcePath}`}>
+              to={`/~link/${resourcePath}`}
+        >
           <h2
             className="dib f9 fw4 lh-solid v-top black white-d"
-            style={{ width: 'max-content' }}>
+            style={{ width: 'max-content' }}
-            {`<- ${title}`}
+          >
+            {`${title}`}
           </h2>
         </Link>
         <TabBar
@@ -61,7 +67,7 @@ export const LinkDetail = (props) => {
           popoutHref={`/~link/popout/${resourcePath}/${props.match.params.index}`}
           settings={`/~link/${resourcePath}/settings`}
         />
-      </div>
+      </Box>
       <div className="w-100 mt2 flex justify-center overflow-y-scroll ph4 pb4">
         <div className="w-100 mw7">
           <LinkPreview
@@ -77,7 +83,8 @@ export const LinkDetail = (props) => {
               name={props.name}
               ship={props.ship}
               api={props.api}
-              parentIndex={props.node.post.index} />
+              parentIndex={props.node.post.index}
+            />
           </div>
           <Comments
             comments={props.node.children}
@@ -87,10 +94,11 @@ export const LinkDetail = (props) => {
             api={props.api}
             hideAvatars={props.hideAvatars}
             hideNicknames={props.hideNicknames}
-            remoteContentPolicy={props.remoteContentPolicy} />
+            remoteContentPolicy={props.remoteContentPolicy}
+          />
         </div>
       </div>
     </div>
   );
-}
+};
 

pkg/interface/src/views/apps/links/components/link-list.js

@@ -5,6 +5,7 @@ import { SidebarSwitcher } from '~/views/components/SidebarSwitch';
 import { Link } from 'react-router-dom';
 import { LinkItem } from './lib/link-item';
 import LinkSubmit from './lib/link-submit';
+import { Box } from '@tlon/indigo-react';
 
 import { getContactDetails } from '~/logic/lib/util';
 
@@ -38,12 +39,16 @@ export const LinkList = (props) => {
         style={{ height: '1rem' }}>
        <Link to="/~link">{'⟵ All Channels'}</Link>
       </div>
-      <div className={
+      <Box
-             'pl4 pt2 flex relative overflow-x-scroll' +
+        pl='12px'
-             'overflow-x-auto-l overflow-x-auto-xl flex-shrink-0' +
+        pt='2'
-             'bb b--gray4 b--gray1-d bg-gray0-d'
+        display='flex'
-           }
+        position='relative'
-           style={{ height: 48 }}>
+        overflowX={['scroll', 'auto']}
+        flexShrink='0'
+        borderBottom='1px solid'
+        borderColor='washedGray'
+        height='48px'>
         <SidebarSwitcher
           sidebarShown={props.sidebarShown}
           popout={props.popout}
@@ -59,7 +64,7 @@ export const LinkList = (props) => {
           popoutHref={`/~link/popout/${resource}`}
           settings={`/~link/${resource}/settings`}
         />
-      </div>
+      </Box>
       <div className="w-100 mt6 flex justify-center overflow-y-scroll ph4 pb4">
         <div className="w-100 mw7">
           <div className="flex">

pkg/interface/src/views/apps/links/components/settings.js

@@ -7,6 +7,8 @@ import { Spinner } from '~/views/components/Spinner';
 import { TabBar } from '~/views/components/chat-link-tabbar';
 import SidebarSwitcher from '~/views/components/SidebarSwitch';
 
+import { Box } from '@tlon/indigo-react';
+
 import { MetadataSettings } from '~/views/components/metadata/settings';
 
 export class SettingsScreen extends Component {
@@ -132,12 +134,16 @@ export class SettingsScreen extends Component {
              style={{ height: '1rem' }}>
           <Link to="/~link">{'⟵ All Collections'}</Link>
         </div>
-        <div
+        <Box
-          className={
+          pl='12px'
-            "pl4 pt2 bb b--gray4 b--gray1-d flex relative overflow-x-scroll " +
+          pt='2'
-            "overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
+          display='flex'
-          }
+          position='relative'
-          style={{ height: 48 }}>
+          overflowX={['scroll', 'auto']}
+          flexShrink='0'
+          borderBottom='1px solid'
+          borderColor='washedGray'
+          height='48px'>
           <SidebarSwitcher
             sidebarShown={this.props.sidebarShown}
             popout={this.props.popout}
@@ -157,7 +163,7 @@ export class SettingsScreen extends Component {
             popoutHref={`/~link/popout/${props.resourcePath}/settings`}
             settings={`/~link/${props.resourcePath}/settings`}
           />
-          </div>
+          </Box>
         <div className="w-100 pl3 mt4 cf">
           <h2 className="f8 pb2">Collection Settings</h2>
           {this.renderRemove()}