# Adding more than three sorts causes an overflow in grid

**URL:** <https://forum.appflowy.com/t/adding-more-than-three-sorts-causes-an-overflow-in-grid/64>\
**Category:** Bug Reports\
**Tags:** grid\
**Created:** [August 12, 2023, 2:00pm UTC](https://forum.appflowy.com/t/adding-more-than-three-sorts-causes-an-overflow-in-grid/64 "2023-08-12T14:00:55Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mayur](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.appflowy.com/mayur/32/17_2.png) [@Mayur](https://forum.appflowy.com/u/Mayur)\
**Post date:** [August 12, 2023, 2:00pm UTC](https://forum.appflowy.com/t/adding-more-than-three-sorts-causes-an-overflow-in-grid/64/1 "2023-08-12T14:00:55Z")

</div>

![overflow](https://us1.discourse-cdn.com/flex016/uploads/appflowy/original/1X/d062f07cdb145391b0219efb38c5ce573c0b7189.png)

Steps to reproduce:

1. Open AppFlowy
2. Open or Insert a new Grid
3. Click Sort
4. Insert new sorts
5. Observe after adding more than 3 sorts

Expected Behavior:  
The button for Add sort and Delete sort should not get overflowed.

Actual:  
The buttons get overflowed

Possible Solution:  
Add a scrollbar to the list of sorts

Additional:  
Good First Issue  
UX

---

<div class="post-metadata">

**Author:** ![Mayur](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.appflowy.com/mayur/32/17_2.png) [@Mayur](https://forum.appflowy.com/u/Mayur)\
**Post date:** [August 12, 2023, 2:56pm UTC](https://forum.appflowy.com/t/adding-more-than-three-sorts-causes-an-overflow-in-grid/64/2 "2023-08-12T14:56:37Z")

</div>

Also, we can put both buttons i.e: Add Sort and Delete Sort in the same row rather than putting them on top of each other.

---

<div class="post-metadata">

**Author:** ![Mathias](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.appflowy.com/mathias/32/5_2.png) [@Mathias](https://forum.appflowy.com/u/Mathias)\
**Post date:** [August 14, 2023, 12:50pm UTC](https://forum.appflowy.com/t/adding-more-than-three-sorts-causes-an-overflow-in-grid/64/3 "2023-08-14T12:50:15Z")

</div>

Does “Delete sort” remove all sorts? Maybe it should be more explicitly stated.

---

<div class="post-metadata">

**Author:** ![Mathias](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.appflowy.com/mathias/32/5_2.png) [@Mathias](https://forum.appflowy.com/u/Mathias)\
**Post date:** [August 14, 2023, 12:54pm UTC](https://forum.appflowy.com/t/adding-more-than-three-sorts-causes-an-overflow-in-grid/64/4 "2023-08-14T12:54:00Z")

</div>

Created a github issue for this

> <https://github.com/AppFlowy-IO/AppFlowy/issues/3196>
>
> \### Bug Description
> 
> Adding more than three sorts causes an overflow in grid
> 
> \##…# How to Reproduce
> 
> 1. Open AppFlowy
> 2. Open or Insert a new Grid
> 3. Click Sort
> 4. Insert new sorts
> 5. Observe after adding more than 3 sorts
> 
> \### Expected Behavior
> 
> The button for Add sort and Delete sort should not get overflowed.
> 
> \### Operating System
> 
> \--
> 
> \### AppFlowy Version(s)
> 
> \--
> 
> \### Screenshots
> 
> !\[d062f07cdb145391b0219efb38c5ce573c0b7189\_2\_690x401\](https://github.com/AppFlowy-IO/AppFlowy/assets/42929161/61b10d20-88d1-4d30-8fab-426c999f5a36)
> 
> 
> \### Additional Context
> 
> Reported on the forum by Mayur
> 
> https://forum.appflowy.com/t/adding-more-than-three-sorts-causes-an-overflow-in-grid/64/3