imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Collapse UserSettings tabs to just icons on narrow screens (#12505)

Browse source 
* Collapse UserSettings tabs to just icons on narrow screens

* Add screenshot test

* Better comment formatting.

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* Comment the media query

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
This commit is contained in:
David Baker 2024-05-10 17:29:50 +01:00 • committed by GitHub
parent c6f6f1d2a2
commit 948435ceb9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 37 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

23
res/css/structures/_TabbedView.pcss
View file

@ -129,6 +129,7 @@ limitations under the License.
padding-inline: var(--cpd-space-3x) var(--cpd-space-4x);
box-sizing: border-box;
min-block-size: 40px;
min-inline-size: 40px;
border-radius: 24px;
font: var(--cpd-font-body-md-medium);
position: relative;
@ -164,3 +165,25 @@ limitations under the License.
overflow: auto;
min-height: 0; /* firefox */
}
/* Hide the labels on tabs, showing only the icons, on narrow viewports. */
@media (max-width: 768px) {
.mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive {
.mx_TabbedView_tabLabel_text {
display: none;
}
.mx_TabbedView_tabPanel {
margin-left: 72px; /* 40px sidebar + 32px padding */
}
.mx_TabbedView_maskedIcon {
margin-right: auto;
margin-left: auto;
}
.mx_TabbedView_tabLabels {
width: auto;
}
.mx_TabbedView_tabLabel {
padding-inline: 0 0;
}
}
}