[BITV] 9.1.4.10/6.2 - At a browser window width of 320 CSS pixels (or at a browser window width of 1280 CSS pixels and 400% zoom magnification), the page contents do not wrap - some information and functions are not available without users having to scroll horizontally. (1)

[AndyScherzinger]

The issue affects both Firefox and Chromium-based browsers, with the whole page being affected in the case of Chromium-based browsers.

Page — Personal info
Personal info - Personal settings - Nextcloud
https://try.nextcloud.com/ltd/a11y/index.php/settings/user

Details

https://report.bitvtest.de/default-en/d63601ac-cb34-4645-8256-66bec78964a0.html#checkpoint-81d891d46b-v6-n2

[JuliaKirschenheuter]

https://ergebnis.bitvtest.de/pruefschritt/bitv-20-web/bitv-20-web-9-1-4-10-inhalte-brechen-um

[JuliaKirschenheuter]

General @JuliaKirschenheuter

Status message dialog @JuliaKirschenheuter

• Change width for input field #40872

• 320px:
  
  solution:
  .clear-at-select (ClearAtSelect.vue): flex-direction: column;

• 1280px + 400% zoom: same

Search contacts @JuliaKirschenheuter

• 320px:
  
  solution:
  #contactsmenu-menu (ContactsMenu.vue): width: 350px

• 1280px + 400% zoom: same

• Fix width of input on contacts menu #40873

Search @JuliaKirschenheuter

• Fix placement of actions within unified search #40979

• 320px:
  

• 1280px + 400% zoom: same

Files

Files @JuliaKirschenheuter

• 320px:
  
  reason:
  .files-list__header (FilesList.vue): margin: 4px 4px 4px 50px;

• 1280px + 400% zoom: same

• Reduce left margin of files list header #40905

• 320px: "Add" button is far away @JuliaKirschenheuter
  
  solution:
  .breadcrumb nav: min-width: 228px;

• Fix NcBreadcrumbs styles to wrap buttons nextcloud-libraries/nextcloud-vue#4640

• 1280px + 400% zoom: same

• 320px: "Add" button is far away @JuliaKirschenheuter
  
  solution:
  create another flexbox styles for .breadcrumb

• 1280px + 400% zoom: same

• Fix NcBreadcrumbs styles to wrap buttons nextcloud-libraries/nextcloud-vue#4640

Files left sidebar @ShGKme

• [BITV] Fix left sidebar from a11y perspective #40954

• 320px: sidebar button (navigation toggle) is not reachable
  

• 1280px + 400% zoom: same

• 320px: vertical scrollbar is visible twice (should be visible once)
  

• 1280px + 400% zoom: same

• 320px: if sidebar is open it is possible to navigate through all other elements. This have to be prohibited.

Aufzeichnung.2023-10-11.145807.mp4

#36964 (comment)

• 1280px + 400% zoom: same

Files right sidebar @JuliaKirschenheuter

• Reduce width of sharing entry #40963

• 320px: Sharing tab: vertical scrollbar is visible
  

• 1280px + 400% zoom: same

• 320px: It is possible to navigate through all other elements on a page even if they are not visible. This have to be prohibited.

• 1280px + 400% zoom: same

Photos @JuliaKirschenheuter

Photos @JuliaKirschenheuter

• 320px: buttons are placed too far away
  
  solution:
  .timeline (Timeline.vue): flex-direction: column;
.timeline__header__left (Timeline.vue): flex-direction: column;

• Reduce width on title and content for header navigation photos#2086

• 1280px + 400% zoom: same

New album modal window @JuliaKirschenheuter

• 320px: buttons are too large
  
  solution:
  .album-form .form-buttons (AlbumForm.vue): flex-direction: column;

• 1280px + 400% zoom: same

• Fix buttons on new album modal window photos#2087

Select the default location for your media modal window @JuliaKirschenheuter

• Fix NcBreadcrumbs styles to wrap buttons nextcloud-libraries/nextcloud-vue#4640

• 320px: breadcrumb nav
  
  solution:
  .breadcrumb nav: min-width: 228px;

• 1280px + 400% zoom: functionality completely broken

• Fix NcBreadcrumbs styles to wrap buttons nextcloud-libraries/nextcloud-vue#4640

Activity @susnux

Activity sidebar

• [BITV]: Sidebar is broken activity#1360

• 320px: toggle navigation button is not always clickable (mouse, keyboard)

• [BITV]: Sidebar is broken activity#1360
  

• 1280px + 400% zoom: same

Users @JuliaKirschenheuter

Users table

• 320px: NcSelect is broken so far table will be moved to left or right
  

• 1280px + 400% zoom: same

• Append to body all selects inside of user table #40902

Apps @szaimen

Your apps

• 320px: Sticky header makes hard to reach important buttons
  

• 1280px + 400% zoom: same

• Fix my-apps view on mobile #40871

Personal settings @szaimen

Personal info

• 320px: several elements are too large
  
  solution:
  Labels + select should have flex-direction: column;

• fix profile visibility settings being too wide #40932

• 1280px + 400% zoom: same

• 1280px + 400% zoom: Choose your profile picture dialog: Recent && Favorites have unneeded horizontal scrolling

solution:
don't load any table if content of a table is empty

Security

• 320px: Dvices & Sessions labels + dropdowns are too large
  
  solution:
  Labels + inputs should have flex-direction: column;

• 1280px + 400% zoom: same

Sharing

• 320px: several elements are too large
  
  solution:
  flex-direction: column;

• 1280px + 400% zoom: same

Availability

• 320px: several elements are too large
  
  solution: create right labels, datetime picker.
  flex-direction: column;

• 1280px + 400% zoom: same

• fix several personal settings problems #40907
• fix profile visibility settings being too wide #40932

Administration settings @szaimen

Overview

• 320px: info icon takes too much place
  
  solution: place info icon somewhere else

• 1280px + 400% zoom: same

Basic settings

• 320px: label of inputs are broken + padding on section is too large
  
  solution: design labels differently

• 1280px + 400% zoom: same

Sharing

• 320px: input field selectLinksExcludedGroups is too large
  

• 1280px + 400% zoom: same

• fix several admin settings problems #40887

[ShGKme]

Note:

In the alternative test with 1280px viewport width and 400% zoom, it should not be rated negatively if permanently positioned content (such as drop-out menus) is not fully accessible due to the very low available height of the browser window. The only check is whether content successfully breaks into a view that does not need to be scrolled horizontally. To check the loss of information and functionality, the test at 320px viewport width is crucial.

So only the width is checked, not the height.

[JuliaKirschenheuter]

closing ticket. As follow up (not exactly related to this ticket with horizontal scrolling):

• [BITV] Fix left sidebar from a11y perspective, [BITV] Fix left sidebar from a11y perspective #40954
• [BITV]: Sidebar is broken, [BITV]: Sidebar is broken activity#1360

[ShGKme]

So only the width is checked, not the height.

UPD: this is not correct.

According to the requirement:

2.2 Alternative test with 1280px viewport width

1. In a browser that supports zoom enlargement by 400% (e.g. B. Chrome) set the browser window to a width of 1280 CSS pixels and a height of 1024 CSS pixels. For this, the Resize-function of Web Developer Toolbar use.

Height 1024px + 400% or 256px also should work.

[ShGKme]

Files	Sidebar	Settings dialog	Apps sidebar

Most problematic places are sidebars and dialogs

[ShGKme]

To fix the sidebar, we can add:

.app-sidebar-tabs__content] {
  min-height: 512px; // or whatever, but not 0 px
}

[ShGKme]

The same with NcAppSettingsDialog