enhance(ui): support auto width for the shui dialog content

deps/shui/src/logseq/shui/dialog/core.cljs

@@ -113,9 +113,9 @@
 ;; components
 (rum/defc modal-inner
   [config]
-  (let [{:keys [id title description content footer on-open-change align open? root-props content-props]} config
+  (let [{:keys [id title description content footer on-open-change align open? auto-width? root-props content-props]} config
         props (dissoc config
-                :id :title :description :content :footer
+                :id :title :description :content :footer auto-width?
                 :align :on-open-change :open? :root-props :content-props)
         props (assoc-in props [:overlay-props :data-align] (name (or align :center)))]
 
@@ -142,7 +142,9 @@
                                 (onPointerDownOutside e))
                               (when-not (some-> (.-target e) (.closest ".ui__dialog-overlay"))
                                 (.preventDefault e))))]
-        (dialog-content (merge props content-props)
+        (dialog-content
+          (cond-> (merge props content-props)
+            auto-width? (assoc :data-auto-width true))
           (when title
             (dialog-header
               (when title (dialog-title title))

resources/css/shui.css

@@ -238,6 +238,10 @@ html[data-theme=dark] {
 
 .ui__dialog-content {
   @apply outline-none;
+
+  &[data-auto-width] {
+    @apply max-w-[90vw] w-max sm:max-w-[960px];
+  }
 }
 
 .ui__button-shortcut-key {

src/main/frontend/extensions/zotero.cljs

@@ -13,6 +13,7 @@
             [frontend.ui :as ui]
             [frontend.util :as util]
             [goog.dom :as gdom]
+            [logseq.shui.ui :as shui]
             [promesa.core :as p]
             [rum.core :as rum]))
 
@@ -320,11 +321,11 @@
   (rum/local "" ::input)
   [state profile* close-fn]
   (let [input (get state ::input)]
-    [:div
+    [:div.w-96
      [:div.sm:flex.sm:items-start
       [:div.mt-3.text-center.sm:mt-0.sm:text-left
-       [:h3#modal-headline.text-lg.leading-6.font-medium
-        "Please enter your profile name"]]]
+       [:h3#modal-headline.text-lg.leading-6.font-medium.mt-2.pb-2
+        "Please enter your profile name:"]]]
 
      [:input.form-input.block.w-full.sm:text-sm.sm:leading-5.my-2
       {:auto-focus    true
@@ -370,9 +371,11 @@
       :class "ml-4"
       :on-click
       (fn []
-        (state/set-modal!
-          (fn [close-fn]
-            (profile-name-dialog-inner profile* close-fn)))))
+        (shui/dialog-open!
+          (fn [{:keys [close]}]
+            (profile-name-dialog-inner profile* close))
+          {:align :center
+           :auto-width? true})))
     (ui/button
       "Delete profile!"
       :small? true