fix(TabBar): Prevents long tabtext overflow

maidsafe · Apr 29, 2019 · 7b7715c · 7b7715c
1 parent f81ca8e
commit 7b7715c
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 71 deletions.
diff --git a/app/components/TabBar/TabBar.tsx b/app/components/TabBar/TabBar.tsx
@@ -40,79 +40,86 @@ export class TabBar extends Component<TabBarProps> {
 
     getTabs = () => {
         const { tabs } = this.props;
-        return tabs.map( ( tab ) : React.ReactNode => {
-            let { title } = tab;
-            if ( isInternalPage( tab ) ) {
-                // TODO: DRY this out with TabContents.jsx
-                const urlObj = url.parse( tab.url );
-                switch ( urlObj.host ) {
-                    case INTERNAL_PAGES.HISTORY: {
-                        title = 'History';
-                        break;
-                    }
-                    case INTERNAL_PAGES.BOOKMARKS: {
-                        title = 'Bookmarks';
-                        break;
-                    }
-                    default: {
-                        title = null;
-                        break;
+        return tabs.map(
+            ( tab ): React.ReactNode => {
+                let { title } = tab;
+                if ( isInternalPage( tab ) ) {
+                    // TODO: DRY this out with TabContents.jsx
+                    const urlObj = url.parse( tab.url );
+                    switch ( urlObj.host ) {
+                        case INTERNAL_PAGES.HISTORY: {
+                            title = 'History';
+                            break;
+                        }
+                        case INTERNAL_PAGES.BOOKMARKS: {
+                            title = 'Bookmarks';
+                            break;
+                        }
+                        default: {
+                            title = null;
+                            break;
+                        }
                     }
                 }
+                if ( tab.isClosed ) {
+                    return;
+                }
+                const { isActiveTab } = tab;
+                let tabStyleClass = styles.tab;
+                const tabData = {
+                    key: tab.index,
+                    tabIndex: tab.index,
+                    url: tab.url
+                };
+                if ( isActiveTab ) {
+                    tabStyleClass = `${styles.activeTab} ${CLASSES.ACTIVE_TAB}`;
+                }
+                return (
+                    <div
+                        key={tab.index}
+                        className={`${tabStyleClass} ${CLASSES.TAB}`}
+                        onClick={( event ) => {
+                            this.handleTabClick( tabData, event );
+                        }}
+                    >
+                        <Row
+                            className={styles.tabRow}
+                            align="middle"
+                            justify="space-between"
+                            type="flex"
+                        >
+                            <Col>
+                                <div className={styles.faviconContainer}>
+                                    {tab.isLoading && (
+                                        <Icon type="loading" className={styles.loadingIcon} />
+                                    )}
+                                    {!tab.isLoading && tab.favicon && (
+                                        <img
+                                            alt=""
+                                            className={styles.favicon}
+                                            id="favicon-img"
+                                            src={tab.favicon}
+                                        />
+                                    )}
+                                </div>
+                            </Col>
+                            <Col className={styles.tabText}>{title || 'New Tab'}</Col>
+                            <Col>
+                                <Icon
+                                    className={`${CLASSES.CLOSE_TAB} ${styles.closeTab}`}
+                                    type="close"
+                                    title={I18n.t( 'close-tab' )}
+                                    aria-label={I18n.t( 'aria.close-tab' )}
+                                    onClick={( event ) => {
+                                        this.handleTabClose( tabData, event );
+                                    }}
+                                />
+                            </Col>
+                        </Row>
+                    </div>
+                );
             }
-            if ( tab.isClosed ) {
-                return;
-            }
-            const { isActiveTab } = tab;
-            let tabStyleClass = styles.tab;
-            const tabData = {
-                key: tab.index,
-                tabIndex: tab.index,
-                url: tab.url
-            };
-            if ( isActiveTab ) {
-                tabStyleClass = `${styles.activeTab} ${CLASSES.ACTIVE_TAB}`;
-            }
-            return (
-                <div
-                    key={tab.index}
-                    className={`${tabStyleClass} ${CLASSES.TAB}`}
-                    onClick={(event) => {
-                        this.handleTabClick( tabData, event );
-                    }}
-                >
-                    <Row align="middle" justify="space-between" type="flex">
-                        <Col>
-                            <div className={styles.faviconContainer}>
-                                {tab.isLoading && (
-                                    <Icon type="loading" className={styles.loadingIcon} />
-                                )}
-                                {!tab.isLoading && tab.favicon && (
-                                    <img
-                                        alt=""
-                                        className={styles.favicon}
-                                        id="favicon-img"
-                                        src={tab.favicon}
-                                    />
-                                )}
-                            </div>
-                        </Col>
-                        <Col className={styles.tabText}>{title || 'New Tab'}</Col>
-                        <Col>
-                            <Icon
-                                className={`${CLASSES.CLOSE_TAB} ${styles.closeTab}`}
-                                type="close"
-                                title={I18n.t( 'close-tab' )}
-                                aria-label={I18n.t( 'aria.close-tab' )}
-                                onClick={( event ) => {
-                                    this.handleTabClose( tabData , event );
-                                }}
-                            />
-                        </Col>
-                    </Row>
-                </div>
-            );
-        } );
+        );
     };
 
     handleAddTabClick( event ) {

diff --git a/app/components/TabBar/tabBar.css b/app/components/TabBar/tabBar.css
@@ -9,7 +9,9 @@
     font-size: 1.4rem;
     -webkit-app-region: drag;
 }
-
+.tabRow {
+    flex-wrap: nowrap;
+}
 .containerMac {
     padding-top: 10px;
     padding-left: 100px;