From a6285cfd3ecb10cb6f5bb28b7a50e337ab3c752b Mon Sep 17 00:00:00 2001
From: ktx-vaidehi <134508096+ktx-vaidehi@users.noreply.github.com>
Date: Fri, 22 Aug 2025 09:57:30 +0530
Subject: [PATCH] fix: dashboard editor getting overlap for custom chart
 (#8083)

### **PR Type**
Bug fix


___

### **Description**
Prevent dashboard editor panel overlap
Wrap errors component in fixed-width container
Adjust layout with non-shrinking sidebar div
Improve panel/side content separation


___

### Diagram Walkthrough


```mermaid
flowchart LR
  Layout["AddPanel layout"] -- "add fixed-width div" --> Errors["DashboardErrorsComponent container"]
  Errors -- "prevent flex shrink" --> NoOverlap["No overlap in editor"]
```



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

<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Bug
fix</strong></td><td><table>
<tr>
  <td>
    <details>
<summary><strong>AddPanel.vue</strong><dd><code>Prevent errors panel
from shrinking and overlapping</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></summary>
<hr>

web/src/views/Dashboards/addPanel/AddPanel.vue

<ul><li>Added closing div for splitter section.<br> <li> Introduced
wrapper div with class <code>col-auto</code> and <code>flex-shrink:
0</code>.<br> <li> Ensured <code>DashboardErrorsComponent</code> sits in
non-shrinking column.</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8083/files#diff-c9632db1ad95af95aba10161bcbc7c5608318919f228637bdafae3f3a31267e8">+2/-0</a>&nbsp;
&nbsp; &nbsp; </td>

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

</details>

___
---
 web/src/views/Dashboards/addPanel/AddPanel.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/src/views/Dashboards/addPanel/AddPanel.vue b/web/src/views/Dashboards/addPanel/AddPanel.vue
index ae77d224d7..103c5fb8fd 100644
--- a/web/src/views/Dashboards/addPanel/AddPanel.vue
+++ b/web/src/views/Dashboards/addPanel/AddPanel.vue
@@ -444,6 +444,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       />
                     </template>
                   </q-splitter>
+                </div>
+                <div class="col-auto" style="flex-shrink: 0">
                   <DashboardErrorsComponent
                     :errors="errorData"
                     class="col-auto"