tab bar is automatically hidden for only one tab

libraries/chrome-tabs/chrome-tabs.css

@@ -5,6 +5,8 @@
   background: var(--main-background-color);
   border-radius: 5px 5px 0 0;
   overflow: hidden;
+  grid-area: tabs;
+  margin-top: 5px;
 }
 .chrome-tabs * {
   box-sizing: inherit;

libraries/chrome-tabs/chrome-tabs.js

@@ -69,6 +69,7 @@
       this.setupEvents()
       this.layoutTabs()
       this.setupDraggabilly()
+      this.setVisibility()
     }
 
     emit(eventName, data) {
@@ -93,6 +94,10 @@
       this.tabEls.forEach((tabEl) => this.setTabCloseEventListener(tabEl))
     }
 
+    setVisibility() {
+      this.el.style.display = this.tabEls.length > 1 ? "block" : "none";
+    }
+
     get tabEls() {
       return Array.prototype.slice.call(this.el.querySelectorAll('.chrome-tab'))
     }
@@ -191,6 +196,7 @@
 
       tabProperties = Object.assign({}, defaultTapProperties, tabProperties)
       this.tabContentEl.appendChild(tabEl)
+      this.setVisibility()
       this.setTabCloseEventListener(tabEl)
       this.updateTab(tabEl, tabProperties)
       this.emit('tabAdd', { tabEl })
@@ -275,6 +281,7 @@
       this.cleanUpPreviouslyDraggedTabs()
       this.layoutTabs()
       this.setupDraggabilly()
+      this.setVisibility()
     }
 
     removeAllTabsExceptForThis(remainingTabEl) {

src/public/stylesheets/desktop.css

@@ -15,7 +15,7 @@ body {
     1fr;
 
     justify-content: center;
-    grid-gap: 10px;
+    grid-gap: 0;
 }
 
 #container.distraction-free-mode {
@@ -31,6 +31,7 @@ body {
 #note-tab-container {
     grid-area: tab-container;
     min-height: 0;
+    padding-left: 10px;
 }
 
 #search-box {
@@ -81,9 +82,9 @@ body {
     display: flex;
     justify-content: space-around;
     padding: 10px 0 10px 0;
-    margin: 0 10px 0 10px;
     border: 1px solid var(--main-border-color);
     border-radius: 7px;
+    margin: 10px 10px 0;
 }
 
 .dropdown-menu {
@@ -161,3 +162,9 @@ li.dropdown-submenu:hover > ul.dropdown-menu {
     position: relative;
     top: -1px;
 }
+
+.note-title-row {
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin-top: 10px;
+}

src/public/stylesheets/mobile.css

@@ -53,6 +53,7 @@ html, body {
 .note-title-row {
     display: flex;
     padding-left: 15px;
+    padding-top: 10px;
     flex-shrink: 0;
 }
 

src/views/title.ejs

@@ -1,4 +1,4 @@
-<div style="flex-grow: 0; flex-shrink: 0;">
+<div class="note-title-row">
     <div style="display: flex; align-items: center;">
         <div class="dropdown hide-toggle">
             <button class="btn btn-sm dropdown-toggle note-path-list-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">