From 2ed4eeff48152ebce29d8c6860bf997f2a92ab5a Mon Sep 17 00:00:00 2001
From: Bhargav <BJP232004@GMAIL.COM>
Date: Tue, 6 Jan 2026 15:09:28 +0530
Subject: [PATCH] fix: fixed toggle button issue for small size (#9852)

### **PR Type**
Bug fix


___

### **Description**
- Add class to `q-toggle` in AddEnrichmentTable

- Adjust padding and font-size on toggles

- Add left margin class to Stream toggle

- Apply custom sizing to IndexList toggles


___



<details> <summary><h3> File Walkthrough</h3></summary>

<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table>
<tr>
  <td>
    <details>
<summary><strong>AddEnrichmentTable.vue</strong><dd><code>Style append
toggle in AddEnrichmentTable</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></summary>
<hr>

web/src/components/functions/AddEnrichmentTable.vue

<ul><li>Added <code>lookup-table-append-toggle</code> class to
<code>q-toggle</code><br> <li> Defined padding and font-size for
<code>.q-toggle__inner</code><br> <li> Made
<code>.q-toggle__thumb:before</code> background transparent</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9852/files#diff-9aad551dbc051edfdb3994a664506ed6d5e27dcb64f9c2fa917b02e51a35d86e">+12/-1</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
  <td>
    <details>
<summary><strong>Stream.vue</strong><dd><code>Add left margin to Stream
toggle</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

web/src/components/pipeline/NodeForm/Stream.vue

<ul><li>Added <code>q-ml-md</code> class to stream
<code>q-toggle</code><br> <li> Ensured consistent left margin on
toggle</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9852/files#diff-1a17ced9dc89022502cab0a6f9b97b413c2a2c4f8219733d063fc0180d361739">+1/-1</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

<tr>
  <td>
    <details>
<summary><strong>IndexList.vue</strong><dd><code>Style toggles in
IndexList logs</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</dd></summary>
<hr>

web/src/plugins/logs/IndexList.vue

<ul><li>Added <code>indexlist-stream-toggle</code> class to
<code>q-toggle</code><br> <li> Updated <code>size</code> attribute from
"20px" to 20<br> <li> Defined padding, font-size, transparent thumb in
CSS</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9852/files#diff-08f058f883b659e713e606991a7ea37ae1ff016b7cccef970489ab5840dc3d09">+15/-1</a>&nbsp;
&nbsp; </td>

</tr>
</table></td></tr></tr></tbody></table>

</details>

___
---
 .../components/functions/AddEnrichmentTable.vue  | 13 ++++++++++++-
 web/src/components/pipeline/NodeForm/Stream.vue  |  2 +-
 web/src/plugins/logs/IndexList.vue               | 16 +++++++++++++++-
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/web/src/components/functions/AddEnrichmentTable.vue b/web/src/components/functions/AddEnrichmentTable.vue
index 1d59e0d976..2f8c95c2eb 100644
--- a/web/src/components/functions/AddEnrichmentTable.vue
+++ b/web/src/components/functions/AddEnrichmentTable.vue
@@ -126,7 +126,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- Append Data Toggle (only when updating existing tables) -->
             <div v-if="isUpdating" class="col-12">
               <q-toggle
-                class="q-py-md text-grey-8 text-bold"
+                class="q-py-md text-grey-8 text-bold lookup-table-append-toggle"
                 v-model="formData.append"
                 :label="t('function.appendData')"
               />
@@ -373,4 +373,15 @@ export default defineComponent({
     left: -30px;
   }
 }
+
+.lookup-table-append-toggle {
+  .q-toggle__inner {
+    padding: 0.325em !important;
+    font-size: 40px !important;
+  }
+
+  .q-toggle__thumb:before {
+    background: transparent !important;
+  }
+}
 </style>
diff --git a/web/src/components/pipeline/NodeForm/Stream.vue b/web/src/components/pipeline/NodeForm/Stream.vue
index c071fadae9..0336a3a18e 100644
--- a/web/src/components/pipeline/NodeForm/Stream.vue
+++ b/web/src/components/pipeline/NodeForm/Stream.vue
@@ -37,7 +37,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <q-toggle
         v-if="selectedNodeType == 'input'"
         data-test="create-stream-toggle"
-        class="q-mb-sm tw:mr-3 tw:h-[36px] o2-toggle-button-lg"
+        class="q-mb-sm tw:mr-3 tw:h-[36px] o2-toggle-button-lg q-ml-md"
         size="lg"
         :class="store.state.theme === 'dark' ? 'o2-toggle-button-lg-dark' : 'o2-toggle-button-lg-light'"
         :label="isUpdating ? 'Edit Stream' : 'Create new Stream'"
diff --git a/web/src/plugins/logs/IndexList.vue b/web/src/plugins/logs/IndexList.vue
index e783c34ce6..0e580a4992 100644
--- a/web/src/plugins/logs/IndexList.vue
+++ b/web/src/plugins/logs/IndexList.vue
@@ -62,7 +62,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <q-toggle
                 :data-test="`log-search-index-list-stream-toggle-${opt.label}`"
                 :model-value="selected"
-                size="20px"
+                class="indexlist-stream-toggle"
+                size="20"
                 @update:model-value="toggleOption(opt.value)"
               />
             </q-item-section>
@@ -1487,3 +1488,16 @@ export default defineComponent({
   }
 }
 </style>
+
+<style lang="scss">
+.indexlist-stream-toggle {
+  .q-toggle__inner {
+    padding: 0.325em !important;
+    font-size: 20px !important;
+  }
+
+  .q-toggle__thumb:before {
+    background: transparent !important;
+  }
+}
+</style>