From 495f6a0f99b4fd847e41bd8446dd4b5765decc4e Mon Sep 17 00:00:00 2001
From: ktx-kirtan <124270523+ktx-kirtan@users.noreply.github.com>
Date: Tue, 14 Jul 2026 19:03:11 +0530
Subject: [PATCH] fix: tooltip alignment (#13187)

---
 .../components/PromQLBuilderOptions.vue       | 26 +++++++++--------
 web/src/lib/forms/Select/OSelect.types.ts     |  2 --
 web/src/lib/overlay/Tooltip/OTooltip.spec.ts  | 29 +++++++++++++++++++
 web/src/lib/overlay/Tooltip/OTooltip.vue      |  4 +--
 4 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/web/src/components/promql/components/PromQLBuilderOptions.vue b/web/src/components/promql/components/PromQLBuilderOptions.vue
index 73eba85153..ccaf14dcda 100644
--- a/web/src/components/promql/components/PromQLBuilderOptions.vue
+++ b/web/src/components/promql/components/PromQLBuilderOptions.vue
@@ -114,19 +114,21 @@
               valueKey="value"
               data-test="dashboard-promql-builder-query-type"
               style="width: 120px"
+            />
+            <OIcon
+              name="info"
+              size="sm"
+              data-test="promql-builder-options-field-info-icon"
+              class="cursor-pointer"
             >
-              <template v-slot:append>
-                <OIcon name="info" size="sm" class="cursor-pointer">
-                  <OTooltip side="top" max-width="250px">
-                    <template #content>
-                      <b>Query Type - </b><br />
-                      Range: Returns time series data over a time range.<br />
-                      Instant: Returns single value at a specific point in time.
-                    </template>
-                  </OTooltip>
-                </OIcon>
-              </template>
-            </OSelect>
+              <OTooltip side="top" max-width="250px">
+                <template #content>
+                  <b>Query Type - </b><br />
+                  Range: Returns time series data over a time range.<br />
+                  Instant: Returns single value at a specific point in time.
+                </template>
+              </OTooltip>
+            </OIcon>
           </div>
         </div>
       </div>
diff --git a/web/src/lib/forms/Select/OSelect.types.ts b/web/src/lib/forms/Select/OSelect.types.ts
index 4ab49080d2..36f3c4ed39 100644
--- a/web/src/lib/forms/Select/OSelect.types.ts
+++ b/web/src/lib/forms/Select/OSelect.types.ts
@@ -160,8 +160,6 @@ export interface SelectSlots {
   "before-options"?: () => unknown;
   /** Icon content inside the trigger on the left — matches OButton's `#icon-left` pattern */
   "icon-left"?: () => unknown;
-  /** Icon content inside the trigger on the right — matches OButton's `#icon-right` pattern */
-  "icon-right"?: () => unknown;
   /**
    * Tooltip content rendered inside an info icon in the label area.
    * Provide a `<q-tooltip>` element as the slot content.
diff --git a/web/src/lib/overlay/Tooltip/OTooltip.spec.ts b/web/src/lib/overlay/Tooltip/OTooltip.spec.ts
index 7c5d868d24..8797002165 100644
--- a/web/src/lib/overlay/Tooltip/OTooltip.spec.ts
+++ b/web/src/lib/overlay/Tooltip/OTooltip.spec.ts
@@ -116,6 +116,35 @@ describe("OTooltip", () => {
     });
   });
 
+  // ── Content wrapper layout ─────────────────────────────────────────────────
+  //
+  // The content wrapper used to be `inline-flex items-center gap-1.5`
+  // unconditionally, purely to align an optional keyboard-shortcut chip. But
+  // `inline-flex` turned every text run / <b> / <br> of a multi-line tooltip
+  // into a separate flex item on one non-wrapping row, so each run collapsed to
+  // its longest word — text wrapped into a narrow column and short leading runs
+  // were vertically centred against the tall body (the "not aligned" bug seen
+  // across Legend / Step / Y-Axis / VRL tooltips). Flex is now applied ONLY when
+  // a shortcut is present; plain tooltips flow as normal wrapping text.
+  it("does not force inline-flex on the content wrapper without a shortcut", () => {
+    const wrapper = mountTooltip(
+      { content: "Multi line body text", open: true },
+      { default: () => h("button", "Hover") },
+    );
+    const contentSpan = wrapper.find('[data-test="o-tooltip-content"] > span');
+    expect(contentSpan.exists()).toBe(true);
+    expect(contentSpan.classes()).not.toContain("inline-flex");
+  });
+
+  it("applies inline-flex on the content wrapper when a shortcut is present", () => {
+    const wrapper = mountTooltip(
+      { content: "Save", open: true, shortcut: "ctrl+s" },
+      { default: () => h("button", "Hover") },
+    );
+    const contentSpan = wrapper.find('[data-test="o-tooltip-content"] > span');
+    expect(contentSpan.classes()).toContain("inline-flex");
+  });
+
   it("applies contentClass to the tooltip bubble", () => {
     const wrapper = mountTooltip(
       { content: "Styled", open: true, contentClass: "my-custom-class" },
diff --git a/web/src/lib/overlay/Tooltip/OTooltip.vue b/web/src/lib/overlay/Tooltip/OTooltip.vue
index 51d5a37f3d..5deb6daff2 100644
--- a/web/src/lib/overlay/Tooltip/OTooltip.vue
+++ b/web/src/lib/overlay/Tooltip/OTooltip.vue
@@ -152,7 +152,7 @@ const contentClasses = computed(() => [
           :style="contentStyle"
           :class="contentClasses"
         >
-          <span class="inline-flex items-center gap-1.5">
+          <span :class="(shortcut || shortcutId) ? 'inline-flex items-center gap-1.5' : ''">
             <slot name="content">{{ content }}</slot>
             <OShortcut
               v-if="shortcut || shortcutId"
@@ -195,7 +195,7 @@ const contentClasses = computed(() => [
             :style="contentStyle"
             :class="contentClasses"
           >
-            <span class="inline-flex items-center gap-1.5">
+            <span :class="(shortcut || shortcutId) ? 'inline-flex items-center gap-1.5' : ''">
               <slot name="content">{{ content }}</slot>
               <OShortcut
               v-if="shortcut || shortcutId"