mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-06 16:09:41 +00:00
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>
</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>
</td>
</tr>
</table></td></tr></tr></tbody></table>
</details>
___
This commit is contained in:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user