fix(ui): main content container overflow when page title too long

src/main/frontend/components/page.cljs

@@ -239,7 +239,7 @@
                     :else
                     (state/set-modal! (confirm-fn)))
                   (util/stop e))]
-    [:span.absolute.inset-0
+    [:span.absolute.inset-0.edit-input-wrapper
      {:class (util/classnames [{:editing @*edit?}])}
      [:input.edit-input
       {:type          "text"
@@ -285,7 +285,7 @@
                   [:a.asset-ref (pdf-assets/fix-local-asset-pagename title)]
                   (if fmt-journal? (date/journal-title->custom-format title) title))
           old-name (or title page-name)]
-      [:h1.page-title.flex.cursor-pointer.gap-1
+      [:h1.page-title.flex.cursor-pointer.gap-1.w-full
        {:on-mouse-down (fn [e]
                            (when (util/right-click? e)
                              (state/set-state! :page-title/context {:page page-name})))
@@ -301,7 +301,7 @@
                           (reset! *input-value (if untitled? "" old-name))
                           (reset! *edit? true))))}
        (when (not= icon "") [:span.page-icon icon])
-       [:div.page-title-sizer-wrapper.relative.w-full
+       [:div.page-title-sizer-wrapper.relative
         (when (rum/react *edit?)
           (page-title-editor {:*title-value *title-value
                               :*edit? *edit?
@@ -314,13 +314,7 @@
         [:span.title.block
          {:data-value (rum/react *input-value)
           :data-ref page-name
-          :style {:opacity (when @*edit? 0)
-                  :pointer-events "none"
-                  :font-weight "inherit"
-                  :white-space "nowrap"
-                  :overflow "hidden"
-                  :text-overflow "ellipsis"
-                  :min-width "80px"}}
+          :style {:opacity (when @*edit? 0)}}
          (cond @*edit? [:span {:style {:white-space "pre"}} (rum/react *input-value)]
                untitled? [:span.opacity-50 (t :untitled)]
                :else title)]]])))
@@ -420,13 +414,13 @@
                                    (page-mouse-leave e *control-show?))}
                 (page-blocks-collapse-control title *control-show? *all-collapsed?)])
              (when-not whiteboard?
-               [:div.flex-1.flex-row
+               [:div.flex-1.flex-row.w-full
                 [:h1.title.ls-page-title (page-title page-name icon title format fmt-journal?)]])
              (when (not config/publishing?)
-               [:div.flex.flex-row
-                (when config/lsp-enabled?
+               (when config/lsp-enabled?
+                 [:div.flex.flex-row
                   (plugins/hook-ui-slot :page-head-actions-slotted nil)
-                  (plugins/hook-ui-items :pagebar))])])
+                  (plugins/hook-ui-items :pagebar)]))])
           [:div
            (when (and block? (not sidebar?) (not whiteboard?))
              (let [config {:id "block-parent"

src/main/frontend/components/page.css

@@ -188,6 +188,7 @@
         position: absolute;
         right: 5px;
         top: 2px;
+
         &:hover {
           opacity: .6;
         }
@@ -267,12 +268,17 @@
     width: 100%;
     border: none;
     box-shadow: none;
-    padding-left: 0;
+    padding-left: 5px;
     padding-top: 5px;
-  }
 
-  &.editing {
-    background-color: var(--ls-secondary-background-color);
+    &-wrapper {
+      @apply rounded;
+
+      &.editing {
+        background-color: var(--ls-secondary-background-color);
+        margin-right: 15px;
+      }
+    }
   }
 }
 
@@ -284,20 +290,30 @@ a.page-title {
   color: inherit;
 }
 
+.page-title-sizer-wrapper {
+  @apply w-full;
+
+  > .title {
+    @apply w-full pointer-events-none overflow-hidden overflow-ellipsis;
+  }
+
+  .edit-input {
+    padding-right: 4px;
+  }
+}
+
 html.is-native-android,
 html.is-native-ipad,
 html.is-native-iphone,
 html.is-native-iphone-without-notch {
-
-    .ls-page-title {
-        margin: 0px 0px 24px -15px;
-        padding: 0px;
-    }
+  .ls-page-title {
+    margin: 0 0 24px -15px;
+    padding: 0 !important;
+  }
 }
 
 /* Change to another cursor style if Shift key is active */
-[data-active-keystroke*="Shift" i]
-:is(.journal-title, .page-title,
+[data-active-keystroke*="Shift" i] :is(.journal-title, .page-title,
     .block-ref, .page-ref, a.tag,
     .bullet-container.cursor) {
   cursor: e-resize;
@@ -324,7 +340,7 @@ html.is-native-iphone-without-notch {
 }
 
 .cp__right-sidebar .add-button-link {
-    margin-left: 21px;
+  margin-left: 21px;
 }
 
 html.is-native-android,
@@ -347,11 +363,11 @@ html.is-native-ios {
   }
 
   .block-content-wrapper {
-      /* 38px is the width of block-control */
-      width: calc(100% - 35px);
-      @screen sm {
-          width: calc(100% - 33px);
-      }
+    /* 38px is the width of block-control */
+    width: calc(100% - 35px);
+    @screen sm {
+      width: calc(100% - 33px);
+    }
   }
 }
 
@@ -366,24 +382,24 @@ html.is-native-ios {
   .control-hide {
     display: none;
   }
- }
+}
 
- .toned-down {
-   opacity: 0.5;
+.toned-down {
+  opacity: 0.5;
   color: var(--ls-secondary-text-color);
- }
+}
 
- .highlighted {
+.highlighted {
   opacity: 1;
   color: var(--ls-primary-text-color);
- }
+}
 
- .separator-top {
-   border-top: 1px solid var(--ls-quaternary-background-color);
- }
+.separator-top {
+  border-top: 1px solid var(--ls-quaternary-background-color);
+}
 
- .icon-box {
+.icon-box {
   display: inline-block;
   line-height: normal;
   background-color: var(--ls-quaternary-background-color);
- }
+}

src/main/frontend/components/whiteboard.css

@@ -71,7 +71,7 @@ h1.title.whiteboard-dashboard-title {
 .dashboard-create-card:hover {
   background-color: var(--ls-selection-background-color);
   box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1),
-    0 2px 4px -2px rgba(16, 24, 40, 0.06);
+  0 2px 4px -2px rgba(16, 24, 40, 0.06);
   border: 1px solid var(--ls-page-blockquote-border-color);
 }
 
@@ -148,12 +148,26 @@ input.tl-text-input {
 }
 
 .whiteboard-page-title {
-  @apply inline-flex px-2 py-1;
+  @apply inline-flex px-2 py-1 w-full;
+
   font-size: 20px;
   border-radius: 8px;
   border: 1px solid transparent;
   background: var(--ls-secondary-background-color);
 
+  &-root {
+    max-width: 70%;
+    overflow: hidden;
+  }
+
+  .page-title-sizer-wrapper {
+    width: 98%;
+
+    > .title {
+      @apply whitespace-nowrap min-w-[80px];
+    }
+  }
+
   .edit-input {
     width: 100%;
     border: none;