fix: several ux issues

tldraw/apps/tldraw-logseq/src/components/BlockLink/BlockLink.tsx

@@ -28,7 +28,7 @@ export const BlockLink = ({ id }: { id: string }) => {
 
   return (
     <button
-      className="inline-flex gap-1 items-baseline w-full"
+      className="inline-flex gap-1 items-center w-full"
       onPointerDown={e => {
         e.stopPropagation()
         if (e.shiftKey) {
@@ -39,14 +39,14 @@ export const BlockLink = ({ id }: { id: string }) => {
       }}
     >
       <TablerIcon name={iconName} />
-      <span className="pointer-events-none">
+      <span className="pointer-events-none block-link-reference-row">
         {linkType === 'P' ? (
           <PageName pageName={id} />
         ) : (
-          <span className="block-link-reference-row">
+          <>
             <Breadcrumb levelLimit={1} blockId={id} endSeparator />
             <BlockReference blockId={id} />
-          </span>
+          </>
         )}
       </span>
     </button>

tldraw/apps/tldraw-logseq/src/components/inputs/ShapeLinksInput.tsx

@@ -96,7 +96,7 @@ export const ShapeLinksInput = observer(function ShapeLinksInput({
       <div className="color-level rounded-lg" data-show-reference-panel={showReferencePanel}>
         {showReferencePanel && (
           <div className="tl-shape-links-reference-panel">
-            <div className="text-base font-bold inline-flex gap-1 items-center">
+            <div className="text-base inline-flex gap-1 items-center">
               <TablerIcon className="opacity-50" name="internal-link" />
               References
             </div>
@@ -104,7 +104,7 @@ export const ShapeLinksInput = observer(function ShapeLinksInput({
           </div>
         )}
         <div className="tl-shape-links-panel color-level">
-          <div className="text-base font-bold inline-flex gap-1 items-center">
+          <div className="text-base inline-flex gap-1 items-center">
             <TablerIcon className="opacity-50" name="add-link" />
             Link to any page or block
           </div>

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

@@ -1054,10 +1054,14 @@ html[data-theme='dark'] {
   .page-ref {
     color: var(--ls-title-text-color);
   }
+
+  button {
+    @apply text-left;
+  }
 }
 
 button.tl-shape-links-panel-item-remove-button {
-  @apply rounded-full w-6 h-6 min-w-0 -ml-4;
+  @apply rounded-full w-6 h-6 min-w-0 -ml-4 flex-shrink-0;
 
   transform: translate(16px, -16px);
 
@@ -1106,7 +1110,7 @@ button.tl-shape-links-panel-item-remove-button {
   min-height: 26px;
 
   > button {
-    @apply px-2;
+    @apply px-2 text-left;
   }
 
   .breadcrumb {
@@ -1146,7 +1150,8 @@ button.tl-shape-links-panel-item-remove-button {
 }
 
 .block-link-reference-row {
+  @apply block;
   > * {
-    display: inline;
+    @apply inline;
   }
 }

tldraw/packages/react/src/components/Canvas/Canvas.tsx

@@ -165,7 +165,7 @@ export const Canvas = observer(function Renderer<S extends TLReactShape>({
               shape={selectedOrHooveredShape}
             />
           )}
-          {hoveredShape && components.QuickLinks && (
+          {hoveredShape && hoveredShape !== singleSelectedShape && components.QuickLinks && (
             <QuickLinksContainer hidden={false} bounds={hoveredShape.bounds} shape={hoveredShape} />
           )}
           {brush && components.Brush && <components.Brush bounds={brush} />}