Re: [PR] feat: reduce some filter width in list views [superset]

Tue, 07 Jan 2025 09:25:18 -0800 


kasiazjc commented on PR #31596:
URL: https://github.com/apache/superset/pull/31596#issuecomment-2575851611

   > Currently in our CRUD list views (dashboards, charts, datasets) we use a 
fixed width of 200px for all filters, regardless of their content. This leads 
to some filter rows overflowing depending on use screen width. Here I'm setting 
some of the filters to be thinner, preventing filters from wrapping into 2 rows.
   > 
   > In the future version of antd, we'll be able to shrink all filters to 
thinner width with `popupMatchSelectWidth={false}`, allowing for the dropdown 
width to be wider than the input box.
   > 
   > ### before
   > <img alt="Screenshot 2024-12-23 at 1 09 14 AM" width="1712" 
src="https://private-user-images.githubusercontent.com/487433/398113316-d57da533-ce9d-403a-89cd-c82a8a8c4000.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzYyNzAzMDAsIm5iZiI6MTczNjI3MDAwMCwicGF0aCI6Ii80ODc0MzMvMzk4MTEzMzE2LWQ1N2RhNTMzLWNlOWQtNDAzYS04OWNkLWM4MmE4YThjNDAwMC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMTA3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDEwN1QxNzEzMjBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wMTU2MjM5MzYwNDkyMWE1MDI1ODI2ZWI3ODAwNDQxOTA1NDY3NTQyMWRhNmM2NmYxOTI1MDhjZDgyZDAyZjUzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.petV1fSs_882FJs-itsbb5JPBgaqOdqKiVnadH3V7LE";>
   > ### after
   > <img alt="Screenshot 2024-12-23 at 1 04 27 AM" width="1705" 
src="https://private-user-images.githubusercontent.com/487433/398113370-3f7c5bcc-803b-421c-9fec-9af85ddd7dd1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzYyNzAzMDAsIm5iZiI6MTczNjI3MDAwMCwicGF0aCI6Ii80ODc0MzMvMzk4MTEzMzcwLTNmN2M1YmNjLTgwM2ItNDIxYy05ZmVjLTlhZjg1ZGRkN2RkMS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMTA3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDEwN1QxNzEzMjBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yZWJlMWI4MDZmMDQ5NTQyMjJkODZjNzg5NTE3ODBkMTZkODRkNDc3M2E3NDkxYzA0MWFiZGQ5OWI5ZTdmOWJlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.X_4BE-ntb2llIA6ryI4RxCCAfNNxOA7j2JRS14Gw1k0";>
   
   Is this still a fixed width or it fills in the space it has? I like the 
ideas of keeping the filters in one line, but different widths in here make it 
a little bit messy. I would consider (probably not eng language, so let me know 
if it needs clarification): 
   
   - making with of the fields flexible - it fills the space it has based on 
the width of the space/screen (it will be different for 1440px and 1720px) so 
it is all in one line
   - adding min width for fields - for example 100px, if it doesn't fit in one 
line, then we wrap
   
   as @mistercrunch said, we have values visible on hover so it for sure helps 
   
   second solution which is notable more time consuming is implementing 
"compact" horizontal filter bar. We've heard from customers that depends on the 
dashboard they could use compact or current horizontal filter bar (it would be 
an option in dashboard). For CRUDs etc we could use compact - preview below. 
   
   <img width="695" alt="image" 
src="https://github.com/user-attachments/assets/d348f755-0cf6-4c59-8025-8e5156fbdfe6";
 />
   <img width="695" alt="image" 
src="https://github.com/user-attachments/assets/fea4db81-c06a-4873-ab41-237db73cbeb4";
 />
   
   
   Thoughts on both? @mistercrunch @michael-s-molina 


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to