fix: adjust scale select on mobile

src/main/frontend/extensions/tldraw.cljs

@@ -82,6 +82,7 @@
                         (model/query-block-by-uuid (parse-uuid block-uuid))))
    :getBlockPageName #(:block/name (model/get-block-page (state/get-current-repo) (parse-uuid %)))
    :isWhiteboardPage model/whiteboard-page?
+   :isMobile util/mobile?
    :saveAsset save-asset-handler
    :makeAssetUrl editor-handler/make-asset-url
    :addNewWhiteboard (fn [page-name]

tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx

@@ -194,32 +194,36 @@ const LogseqPortalViewModeAction = observer(() => {
 })
 
 const ScaleLevelAction = observer(() => {
+  const {
+    handlers: { isMobile },
+  } = React.useContext(LogseqContext)
+
   const app = useApp<Shape>()
   const shapes = filterShapeByAction<LogseqPortalShape>(app.selectedShapesArray, 'ScaleLevel')
   const scaleLevel = new Set(shapes.map(s => s.scaleLevel)).size > 1 ? '' : shapes[0].scaleLevel
   const sizeOptions: SelectOption[] = [
     {
-      label: 'Extra Small',
+      label: isMobile() ? 'XS' : 'Extra Small',
       value: 'xs',
     },
     {
-      label: 'Small',
+      label: isMobile() ? 'SM' : 'Small',
       value: 'sm',
     },
     {
-      label: 'Medium',
+      label: isMobile() ? 'MD' : 'Medium',
       value: 'md',
     },
     {
-      label: 'Large',
+      label: isMobile() ? 'LG' : 'Large',
       value: 'lg',
     },
     {
-      label: 'Extra Large',
+      label: isMobile() ? 'XL' : 'Extra Large',
       value: 'xl',
     },
     {
-      label: 'Huge',
+      label: isMobile() ? 'XXL' : 'Huge',
       value: 'xxl',
     },
   ]

tldraw/apps/tldraw-logseq/src/lib/logseq-context.ts

@@ -45,6 +45,7 @@ export interface LogseqContextValue {
     queryBlockByUUID: (uuid: string) => any
     getBlockPageName: (uuid: string) => string
     isWhiteboardPage: (pageName: string) => boolean
+    isMobile: () => boolean
     saveAsset: (file: File) => Promise<string>
     makeAssetUrl: (relativeUrl: string) => string
     sidebarAddBlock: (uuid: string, type: 'block' | 'page') => void

tldraw/apps/tldraw-logseq/src/styles.css

@@ -302,7 +302,6 @@ button.tl-select-input-trigger {
   @apply flex items-center px-3;
   box-shadow: 0 0 0 1px var(--ls-secondary-border-color);
   background-color: var(--ls-secondary-background-color);
-  min-width: 160px;
   border-radius: 8px;
   font-size: 16px;
   height: 100%;
@@ -310,8 +309,7 @@ button.tl-select-input-trigger {
 }
 
 .tl-select-input-trigger-value {
-  @apply flex items-center justify-start flex-1;
-  line-height: 24px;
+  @apply flex items-center justify-start flex-1 mr-1 md:mr-3;
 }
 
 .tl-select-input-viewport {