fix(whiteboard): toolbar positioning in small screens

src/main/frontend/components/whiteboard.cljs

@@ -8,7 +8,7 @@
             [frontend.handler.route :as route-handler]
             [frontend.handler.user :as user-handler]
             [frontend.handler.whiteboard :as whiteboard-handler]
-            [frontend.rum :refer [use-bounding-client-rect use-click-outside]]
+            [frontend.rum :refer [use-bounding-client-rect use-click-outside use-breakpoint]]
             [frontend.state :as state]
             [frontend.ui :as ui]
             [frontend.util :as util]
@@ -207,39 +207,44 @@
                                      :checked (boolean (checked-page-names whiteboard-name))
                                      :on-checked-change (fn [checked]
                                                           (set-checked-page-names (if checked
-                                                                               (conj checked-page-names whiteboard-name)
-                                                                               (disj checked-page-names whiteboard-name))))})])
+                                                                                    (conj checked-page-names whiteboard-name)
+                                                                                    (disj checked-page-names whiteboard-name))))})])
          (for [n (range empty-cards)]
            [:div.dashboard-card.dashboard-bg-card {:key n}])]]])
     [:div "This feature is not publicly available yet."]))
 
 (rum/defc whiteboard-page
-  [name block-id]
-  [:div.absolute.w-full.h-full.whiteboard-page
+  [page-name block-id]
+  (let [[ref bp] (use-breakpoint)]
+    [:div.absolute.w-full.h-full.whiteboard-page
 
-   ;; makes sure the whiteboard will not cover the borders
-   {:key name
-    :style {:padding "0.5px" :z-index 0
-            :transform "translateZ(0)"
-            :text-rendering "geometricPrecision"
-            :-webkit-font-smoothing "subpixel-antialiased"}}
+     ;; makes sure the whiteboard will not cover the borders
+     {:key page-name
+      :ref ref
+      :data-breakpoint (name bp)
+      :style {:padding "0.5px" :z-index 0
+              :transform "translateZ(0)"
+              :text-rendering "geometricPrecision"
+              :-webkit-font-smoothing "subpixel-antialiased"}}
 
-   [:div.whiteboard-page-title-root
-    [:span.whiteboard-page-title
-     {:style {:color "var(--ls-primary-text-color)"
-              :user-select "none"}}
-     (page/page-title name
-                      [:span.tie.tie-whiteboard
-                       {:style {:font-size "0.9em"}}]
-                      (get-page-display-name name)
-                      nil
-                      false)]
+     [:div.whiteboard-page-title-root
+      [:div.whiteboard-page-title
+       {:style {:color "var(--ls-primary-text-color)"
+                :user-select "none"}}
+       (page/page-title page-name
+                        [:span.tie.tie-whiteboard
+                         {:style {:font-size "0.9em"}}]
+                        (get-page-display-name page-name)
+                        nil
+                        false)]
 
-    (page-refs-count name
-                     "text-md px-3 py-2 cursor-default whiteboard-page-refs-count"
-                     (fn [open?] [:<> "References" (ui/icon (if open? "references-hide" "references-show")
-                                                            {:extension? true})]))]
-   (tldraw-app name block-id)])
+      [:div.whiteboard-page-refs
+       (page-refs-count page-name
+                        "text-md px-3 py-2 cursor-default whiteboard-page-refs-count"
+                        (fn [open?] [:span.whiteboard-page-refs-count-label
+                                     "References" (ui/icon (if open? "references-hide" "references-show")
+                                                           {:extension? true})]))]]
+     (tldraw-app page-name block-id)]))
 
 (rum/defc whiteboard-route
   [route-match]

src/main/frontend/components/whiteboard.css

@@ -125,6 +125,7 @@ input.tl-text-input {
 }
 
 .whiteboard-page-refs-count {
+  @apply whitespace-nowrap;
   border-radius: 8px;
   background: var(--ls-primary-background-color);
 }
@@ -137,7 +138,7 @@ input.tl-text-input {
 .whiteboard-page-title-root {
   @apply shadow-md flex items-center;
   position: absolute;
-  left: 53px;
+  left: 2.5rem;
   top: 0;
   background: var(--ls-primary-background-color);
   padding: 4px;
@@ -148,7 +149,7 @@ input.tl-text-input {
 }
 
 .whiteboard-page-title {
-  @apply inline-flex px-2 py-1 w-full;
+  @apply flex px-2 py-1 flex-1 overflow-ellipsis overflow-hidden;
 
   font-size: 20px;
   border-radius: 8px;
@@ -161,7 +162,7 @@ input.tl-text-input {
   }
 
   .page-title-sizer-wrapper {
-    width: 98%;
+    width: calc(100% - 24px);
 
     > .title {
       @apply whitespace-nowrap min-w-[80px];
@@ -184,3 +185,30 @@ input.tl-text-input {
   border: 1px solid var(--ls-border-color);
   box-shadow: 0 0 0 4px var(--ls-focus-ring-color);
 }
+
+.whiteboard-page-refs-count-label {
+  @apply flex gap-1 items-center;
+}
+
+.whiteboard-page-refs {
+  @apply flex-shrink-0;
+}
+
+.whiteboard-page[data-breakpoint=sm] {
+  .whiteboard-page-refs-count-label {
+    display: none;
+  }
+
+  .whiteboard-page-title-root {
+    left: 0.5rem;
+  }
+
+  .tl-action-bar {
+    left: 0.5rem;
+    bottom: 0.5rem;
+  }
+
+  .tl-primary-tools {
+    right: 0;
+  }
+}

src/main/frontend/rum.cljs

@@ -119,6 +119,28 @@
       [ref tick])
      [set-ref rect])))
 
+(defn ->breakpoint
+  "Converts a number to a breakpoint string
+   Values come from https://tailwindcss.com/docs/responsive-design"
+  [size]
+  (cond
+    (nil? size) :md
+    (<= size 640) :sm
+    (<= size 768) :md
+    (<= size 1024) :lg
+    (<= size 1280) :xl
+    (<= size 1536) :xl
+    :else :2xl))
+
+(defn use-breakpoint
+  "Returns the current breakpoint
+   You can manually change the tick value, if you want to force refresh the value, you can manually change the tick value"
+  ([] (use-breakpoint nil))
+  ([tick]
+   (let [[ref rect] (use-bounding-client-rect tick)
+         bp (->breakpoint (when (some? rect) (.-width rect)))]
+     [ref bp])))
+
 (defn use-click-outside
   "Returns a function that can be used to register a callback
    that will be called when the user clicks outside the given dom node"