Mobile/responsive layout broken?

[asifbacchus]

Describe your question/ User settings and entire administration interface is not responsive (i.e. does not display properly on smaller/mobile screens). Even in desktop layouts where the window is not fullscreen, many elements are cutoff on the right edge. Is there something I'm missing or a workaround for this?

Relevant infos Docker-Compose: 2023.1, 2023.6, 2023.8, 2323.10

Screenshots Can provide if required.

Logs N/A, CSS styling issue

Version and Deployment (please complete the following information):

• authentik version: tested on 2023.1, 2023.6, 2023.8, 2323.10
• Deployment: Docker-Compose

Additional context

[asifbacchus]

After examining bit more, the problem at least for user settings is that ak-tabs has the vertical attribute assigned at all screen sizes. As a result, the tabs never move "horizontal" and extra space is taken up on smaller screen layouts.

As for the right-half of the screen expanding beyond the window, This seems to happen only at certain window sizes as the media-queries partially address the issue. For now, custom.css can work around this issue:

.pf-c.page {
    max-width: 100vw !important;
}

In the admin settings, the issue seems mostly caused by the "Recent events" box on the Dashboard since IPv6 Client IP addresses are long and don't get broken by the default wrapping settings. Again, in custom.css:

.pf-c-table {
    --pf-c-table--cell-WordBreak: break-all;
}

I'll keep puttering around and post anything I find. However, it seems the ak-tabs issue needs to be addressed in code since css cannot override attributes.

[BeryJu]

While the pages are still mostly useable on smaller screens, we'll continue working on improving the experience on smaller viewports