Fix scroll right on mobile

[FelixMalfait]

2 issues I've noticed on mobile.

On List view, I can scroll too far to the right

On Kanban view there the border to separate the two sections suddenly stops:

[greptile-apps]

To address the issues observed on mobile for both List and Kanban views, follow these steps:

1. Fixing Excessive Scrolling on List View:

   • Inspect the CSS for elements rendered in the List view, particularly looking for width, max-width, or overflow properties that might be causing the issue. Adjust these properties in /packages/twenty-website/src/app/layout.css to ensure content fits within the viewport without causing unnecessary horizontal scrolling.

2. Correcting the Border Issue in Kanban View:

   • For the Kanban view border that stops abruptly, review the Kanban view's container and card styles. It's likely that the border is applied to a parent container that doesn't extend the full length of the content on mobile screens. Consider extending the border to the last child or ensuring the container stretches as needed. This might involve adjusting height or min-height properties, or ensuring that the border is applied to elements that are guaranteed to stretch with the content.
   • Additionally, verify the implementation of the border in the Kanban view documentation within /packages/twenty-website/src/content/user-guide/kanban-views.mdx to ensure it matches the intended design and functionality across all screen sizes.

These steps should help resolve the issues specific to mobile views without affecting the desktop experience. Ensure to test changes on various devices and screen sizes for best results.

References

twentyhq/twenty/packages/twenty-website/src/app/layout.css
twentyhq/twenty/packages/twenty-website/src/content/user-guide/kanban-views.mdx

Ask Greptile

[greptile-apps]

To address the issues observed on mobile for both List and Kanban views, follow these steps:

1. Fixing Excessive Scrolling on List View:

   • Inspect the CSS for elements rendered in the List view, particularly looking for width, max-width, or overflow properties that might be causing the issue. Since the specific CSS file for the List view isn't provided, start with /packages/twenty-website/src/app/layout.css and look for any global styles or media queries that might affect mobile layouts.

2. Correcting the Border Issue in Kanban View:

   • For the Kanban view, the border issue might be related to the styling of the stages or cards. Refer to the Kanban Views documentation (/packages/twenty-website/src/content/user-guide/kanban-views.mdx) to understand the structure and styling applied.
   • Adjust the CSS for the Kanban view, possibly within the same layout.css or a dedicated Kanban view CSS file, to ensure the border extends as expected on mobile devices. This might involve setting a min-height, adjusting border properties, or ensuring the container elements correctly encapsulate the stages.

Unfortunately, without direct access to the specific CSS rules or elements causing these issues, these steps are general guidance. Adjustments should be tested on various screen sizes to ensure the fixes apply across all mobile devices.

References

twentyhq/twenty/packages/twenty-website/src/app/layout.css
twentyhq/twenty/packages/twenty-website/src/content/user-guide/kanban-views.mdx

Ask Greptile

[greptile-apps]

To address the mobile scrolling and border display issues, follow these steps:

1. Fix Excessive Scrolling in List View:

   • In /packages/twenty-website/src/app/layout.css, ensure that the container for the List view has overflow-x: hidden; set. This will prevent horizontal scrolling beyond the content width.

2. Correct Border Display in Kanban View:

   • For the border issue in the Kanban view, first, verify if the border styling is applied directly within the Kanban component's CSS or through inline styles. If the border is defined in layout.css, ensure that the border property is consistently applied across all screen sizes. You might need to add a media query specifically for mobile screens to adjust the border visibility or continuity.
   • Example CSS adjustment for mobile screens:

     @media (max-width: 768px) {
       .kanban-container .kanban-column:last-child {
         border-right: 1px solid #ccc; /* Adjust the color and style as needed */
       }
     }

These steps are based on common practices for handling similar issues and assume that the List and Kanban views are styled through the mentioned layout.css file and potentially inline styles within the Kanban view documentation (kanban-views.mdx). Adjust the class names and selectors according to the actual implementation in your project.

References

twentyhq/twenty/packages/twenty-website/src/app/layout.css
twentyhq/twenty/packages/twenty-website/src/content/user-guide/kanban-views.mdx

Ask Greptile

[orinamio]

I'll look into this issue. Can you assign me to it?

[FelixMalfait]

On fire @orinamio 😅 - don't pay too much attention to Greptile's comment, it's nice to give ideas but I think most of the time it's not correct. Just assigned you

[orinamio]

First screenshot: Unable to reproduce the bug. Tested on a real mobile device. I couldn't replicate it 🤔

Second screenshot: #5290 would resolve this issue.