fix(capacitor): long graph name for the graphs select label

src/main/capacitor/components/app.cljs

@@ -32,7 +32,7 @@
         short-repo-name (if current-repo
                           (db-conn/get-short-repo-name current-repo)
                           "Select a Graph")]
-    [:<>
+    [:.app-graph-select
      (ion/button
       {:fill "clear"
        :mode "ios"
@@ -42,7 +42,7 @@
                                   (for [repo graphs]
                                     {:text (some-> (:url repo) (string/replace #"^logseq_db_" ""))
                                      :role (:url repo)})
-                                  [{:text "Add new graph"
+                                  [{:text "+ Add new graph"
                                     :role "add-new-graph"}])]
                      (ui/open-modal! "Switch graph"
                                      {:type :action-sheet
@@ -56,7 +56,11 @@
                                                            (repo-handler/new-db! db-name)))
                                                        (when (string/starts-with? role "logseq_db_")
                                                          (fstate/pub-event! [:graph/switch role])))))})))}
-      short-repo-name)]))
+       [:span.flex.items-center.gap-2.opacity-95
+        (ion/tabler-icon "database" {:size 20})
+        [:strong.overflow-hidden.text-ellipsis.block.font-bold
+         {:style {:max-width "40vw"}}
+         short-repo-name]])]))
 
 (rum/defc bottom-tabs
   []

src/main/capacitor/components/app.css

@@ -6,7 +6,7 @@
 /* } */
 
 html.plt-capacitor.plt-android {
-  --ion-safe-area-top: 40px;
+  --ion-safe-area-top: 42px;
   --ion-safe-area-bottom: 16px;
 
   ion-button, ion-tab-button {
@@ -39,6 +39,20 @@ ion-textarea {
   }
 }
 
+ion-buttons {
+  &:has(.app-graph-select) {
+    @apply max-w-[60%] overflow-hidden;
+  }
+}
+
+.app-graph-select {
+  ion-button {
+    &::part(native) {
+      @apply whitespace-nowrap overflow-hidden font-semibold active:opacity-80 pr-8;
+    }
+  }
+}
+
 .ui__notifications {
   @apply fixed top-8 pointer-events-none w-full;
 
@@ -68,6 +82,6 @@ ion-textarea {
 }
 
 :root {
-    --ls-page-title-size: 26px;
-    --ion-color-primary: #000000;
+  --ls-page-title-size: 26px;
+  --ion-color-primary: #000000;
 }