Merge pull request #59538 from nextcloud/backport/59325/stable33
Some checks are pending
CodeQL Advanced / Analyze (actions) (push) Waiting to run
CodeQL Advanced / Analyze (javascript-typescript) (push) Waiting to run
Integration sqlite / changes (push) Waiting to run
Integration sqlite / integration-sqlite (stable33, 8.4, stable33, --tags ~@large files_features) (push) Blocked by required conditions
Integration sqlite / integration-sqlite (stable33, 8.4, stable33, capabilities_features) (push) Blocked by required conditions
Integration sqlite / integration-sqlite (stable33, 8.4, stable33, collaboration_features) (push) Blocked by required conditions
Integration sqlite / integration-sqlite (stable33, 8.4, stable33, comments_features) (push) Blocked by required conditions
Integration sqlite / integration-sqlite (stable33, 8.4, stable33, dav_features) (push) Blocked by required conditions
Integration sqlite / integration-sqlite (stable33, 8.4, stable33, features) (push) Blocked by required conditions
Integration sqlite / integration-sqlite (stable33, 8.4, stable33, federation_features) (push) Blocked by required conditions
Integration sqlite / integration-sqlite (stable33, 8.4, stable33, file_conversions) (push) Blocked by required conditions
Integration sqlite / integration-sqlite (stable33, 8.4, stable33, files_reminders) (push) Blocked by required conditions
Integration sqlite / integration-sqlite (stable33, 8.4, stable33, filesdrop_features) (push) Blocked by required conditions
Integration sqlite / integration-sqlite (stable33, 8.4, stable33, ldap_features) (push) Blocked by required conditions
Integration sqlite / integration-sqlite (stable33, 8.4, stable33, openldap_features) (push) Blocked by required conditions
Integration sqlite / integration-sqlite (stable33, 8.4, stable33, openldap_numerical_features) (push) Blocked by required conditions
Integration sqlite / integration-sqlite (stable33, 8.4, stable33, remoteapi_features) (push) Blocked by required conditions
Integration sqlite / integration-sqlite (stable33, 8.4, stable33, routing_features) (push) Blocked by required conditions
Integration sqlite / integration-sqlite (stable33, 8.4, stable33, setup_features) (push) Blocked by required conditions
Integration sqlite / integration-sqlite (stable33, 8.4, stable33, sharees_features) (push) Blocked by required conditions
Integration sqlite / integration-sqlite (stable33, 8.4, stable33, sharing_features) (push) Blocked by required conditions
Integration sqlite / integration-sqlite (stable33, 8.4, stable33, theming_features) (push) Blocked by required conditions
Integration sqlite / integration-sqlite (stable33, 8.4, stable33, videoverification_features) (push) Blocked by required conditions
Integration sqlite / integration-sqlite-summary (push) Blocked by required conditions
Psalm static code analysis / static-code-analysis (push) Waiting to run
Psalm static code analysis / static-code-analysis-security (push) Waiting to run
Psalm static code analysis / static-code-analysis-ocp (push) Waiting to run
Psalm static code analysis / static-code-analysis-ncu (push) Waiting to run

[stable33] fix: profile page on small screens
This commit is contained in:
Carl Schwan 2026-04-10 16:11:19 +02:00 committed by GitHub
commit 255f700b3c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 40 additions and 33 deletions

View file

@ -369,6 +369,38 @@ $content-max-width: 640px;
}
}
.user-actions {
display: flex;
flex-direction: column;
gap: 8px 0;
margin-top: 20px;
max-width: 300px;
&__primary {
margin: 0 auto;
max-width: 100%;
&__icon {
filter: var(--primary-invert-if-dark);
}
}
&__other {
display: flex;
justify-content: center;
gap: 0 4px;
&__icon {
height: 20px;
width: 20px;
object-fit: contain;
filter: var(--background-invert-if-dark);
align-self: center;
margin: 12px; // so we get 44px x 44px
}
}
}
@media only screen and (max-width: 1024px) {
.profile {
&__header {
@ -419,37 +451,12 @@ $content-max-width: 640px;
position: unset;
}
}
}
.user-actions {
display: flex;
flex-direction: column;
gap: 8px 0;
margin-top: 20px;
max-width: 300px;
&__primary {
.user-actions {
width: unset;
max-width: 600px;
margin: 0 auto;
max-width: 100%;
&__icon {
filter: var(--primary-invert-if-dark);
}
}
&__other {
display: flex;
justify-content: center;
gap: 0 4px;
&__icon {
height: 20px;
width: 20px;
object-fit: contain;
filter: var(--background-invert-if-dark);
align-self: center;
margin: 12px; // so we get 44px x 44px
}
padding: 20px 50px 0px 50px;
}
}
</style>

View file

@ -1,5 +1,5 @@
/* extracted by css-entry-points-plugin */
@import './profile-profile-main-YvNfSVUo.chunk.css';
@import './profile-profile-main-65fj8xOs.chunk.css';
@import './createElementId-DhjFt1I9-C_oBIsvc.chunk.css';
@import './logger-D3RVzcfQ-D7L4ZBkR.chunk.css';
@import './mdi-BYHcrfvW.chunk.css';

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1 @@
._profileSection_1o17g_2{margin-top:2rem}[data-v-596d11e3] #app-content-vue{background-color:unset}.profile[data-v-596d11e3]{width:100%;overflow-y:auto}.profile__header[data-v-596d11e3]{display:flex;position:sticky;height:190px;top:-40px;background-color:var(--color-main-background-blur);backdrop-filter:var(--filter-background-blur);-webkit-backdrop-filter:var(--filter-background-blur)}.profile__header__container[data-v-596d11e3]{align-self:flex-end;width:100%;max-width:1024px;margin:8px auto;row-gap:8px;display:grid;grid-template-rows:max-content max-content;grid-template-columns:240px 1fr;justify-content:center}.profile__header__container__placeholder[data-v-596d11e3]{grid-row:1/3}.profile__header__container__displayname[data-v-596d11e3]{padding-inline:16px;width:640px;height:45px;margin-block:125px 0;display:flex;align-items:center;gap:18px}.profile__header__container__displayname h2[data-v-596d11e3]{font-size:30px;margin:0}.profile__header__container__displayname span[data-v-596d11e3]{font-size:20px}.profile__sidebar[data-v-596d11e3]{position:sticky;top:0;align-self:flex-start;padding-top:20px;min-width:220px;margin-block:-150px 0;margin-inline:0 20px}.profile__sidebar[data-v-596d11e3] .avatar.avatardiv{text-align:center;margin:auto;display:block;padding:8px}.profile__sidebar[data-v-596d11e3] .avatar.avatardiv.interactive .avatardiv__user-status{cursor:pointer}.profile__sidebar[data-v-596d11e3] .avatar.avatardiv .avatardiv__user-status{inset-inline-end:14px;bottom:14px;width:34px;height:34px;background-size:28px;border:none;background-color:var(--color-main-background);line-height:34px;font-size:20px}.profile__wrapper[data-v-596d11e3]{background-color:var(--color-main-background);min-height:100%}.profile__content[data-v-596d11e3]{max-width:1024px;margin:0 auto;display:flex;width:100%}.profile__blocks[data-v-596d11e3]{margin:18px 0 80px;display:grid;gap:16px 0;width:640px}.profile__blocks p[data-v-596d11e3],.profile__blocks h3[data-v-596d11e3]{cursor:text;overflow-wrap:anywhere}.profile__blocks-details[data-v-596d11e3]{display:flex;flex-direction:column;gap:2px 0}.profile__blocks-details .detail[data-v-596d11e3]{display:inline-block;color:var(--color-text-maxcontrast)}.profile__blocks-details .detail p .map-icon[data-v-596d11e3]{display:inline-block;vertical-align:middle}.profile__blocks-headline[data-v-596d11e3]{margin-inline:0;margin-block:10px 0;font-weight:700;font-size:20px}.user-actions[data-v-596d11e3]{display:flex;flex-direction:column;gap:8px 0;margin-top:20px;max-width:300px}.user-actions__primary[data-v-596d11e3]{margin:0 auto;max-width:100%}.user-actions__primary__icon[data-v-596d11e3]{filter:var(--primary-invert-if-dark)}.user-actions__other[data-v-596d11e3]{display:flex;justify-content:center;gap:0 4px}.user-actions__other__icon[data-v-596d11e3]{height:20px;width:20px;object-fit:contain;filter:var(--background-invert-if-dark);align-self:center;margin:12px}@media only screen and (max-width:1024px){.profile__header[data-v-596d11e3]{height:250px;position:unset}.profile__header__container[data-v-596d11e3]{grid-template-columns:unset;margin-bottom:110px}.profile__header__container__displayname[data-v-596d11e3]{margin:80px 20px 0 0!important;width:unset;text-align:center;padding-inline:12px}.profile__header__container__edit-button[data-v-596d11e3]{width:fit-content;display:block;margin:60px auto}.profile__header__container__status-text[data-v-596d11e3]{margin:4px auto}.profile__content[data-v-596d11e3]{display:block}.profile__content .avatar[data-v-596d11e3]{margin-top:-110px!important}.profile__blocks[data-v-596d11e3]{width:unset;max-width:600px;margin:0 auto;padding:20px 50px 50px}.profile__sidebar[data-v-596d11e3]{margin:unset;position:unset}.user-actions[data-v-596d11e3]{width:unset;max-width:600px;margin:0 auto;padding:20px 50px 0}}

View file

@ -1 +0,0 @@
._profileSection_1o17g_2{margin-top:2rem}[data-v-4561b582] #app-content-vue{background-color:unset}.profile[data-v-4561b582]{width:100%;overflow-y:auto}.profile__header[data-v-4561b582]{display:flex;position:sticky;height:190px;top:-40px;background-color:var(--color-main-background-blur);backdrop-filter:var(--filter-background-blur);-webkit-backdrop-filter:var(--filter-background-blur)}.profile__header__container[data-v-4561b582]{align-self:flex-end;width:100%;max-width:1024px;margin:8px auto;row-gap:8px;display:grid;grid-template-rows:max-content max-content;grid-template-columns:240px 1fr;justify-content:center}.profile__header__container__placeholder[data-v-4561b582]{grid-row:1/3}.profile__header__container__displayname[data-v-4561b582]{padding-inline:16px;width:640px;height:45px;margin-block:125px 0;display:flex;align-items:center;gap:18px}.profile__header__container__displayname h2[data-v-4561b582]{font-size:30px;margin:0}.profile__header__container__displayname span[data-v-4561b582]{font-size:20px}.profile__sidebar[data-v-4561b582]{position:sticky;top:0;align-self:flex-start;padding-top:20px;min-width:220px;margin-block:-150px 0;margin-inline:0 20px}.profile__sidebar[data-v-4561b582] .avatar.avatardiv{text-align:center;margin:auto;display:block;padding:8px}.profile__sidebar[data-v-4561b582] .avatar.avatardiv.interactive .avatardiv__user-status{cursor:pointer}.profile__sidebar[data-v-4561b582] .avatar.avatardiv .avatardiv__user-status{inset-inline-end:14px;bottom:14px;width:34px;height:34px;background-size:28px;border:none;background-color:var(--color-main-background);line-height:34px;font-size:20px}.profile__wrapper[data-v-4561b582]{background-color:var(--color-main-background);min-height:100%}.profile__content[data-v-4561b582]{max-width:1024px;margin:0 auto;display:flex;width:100%}.profile__blocks[data-v-4561b582]{margin:18px 0 80px;display:grid;gap:16px 0;width:640px}.profile__blocks p[data-v-4561b582],.profile__blocks h3[data-v-4561b582]{cursor:text;overflow-wrap:anywhere}.profile__blocks-details[data-v-4561b582]{display:flex;flex-direction:column;gap:2px 0}.profile__blocks-details .detail[data-v-4561b582]{display:inline-block;color:var(--color-text-maxcontrast)}.profile__blocks-details .detail p .map-icon[data-v-4561b582]{display:inline-block;vertical-align:middle}.profile__blocks-headline[data-v-4561b582]{margin-inline:0;margin-block:10px 0;font-weight:700;font-size:20px}@media only screen and (max-width:1024px){.profile__header[data-v-4561b582]{height:250px;position:unset}.profile__header__container[data-v-4561b582]{grid-template-columns:unset;margin-bottom:110px}.profile__header__container__displayname[data-v-4561b582]{margin:80px 20px 0 0!important;width:unset;text-align:center;padding-inline:12px}.profile__header__container__edit-button[data-v-4561b582]{width:fit-content;display:block;margin:60px auto}.profile__header__container__status-text[data-v-4561b582]{margin:4px auto}.profile__content[data-v-4561b582]{display:block}.profile__content .avatar[data-v-4561b582]{margin-top:-110px!important}.profile__blocks[data-v-4561b582]{width:unset;max-width:600px;margin:0 auto;padding:20px 50px 50px}.profile__sidebar[data-v-4561b582]{margin:unset;position:unset}}.user-actions[data-v-4561b582]{display:flex;flex-direction:column;gap:8px 0;margin-top:20px;max-width:300px}.user-actions__primary[data-v-4561b582]{margin:0 auto;max-width:100%}.user-actions__primary__icon[data-v-4561b582]{filter:var(--primary-invert-if-dark)}.user-actions__other[data-v-4561b582]{display:flex;justify-content:center;gap:0 4px}.user-actions__other__icon[data-v-4561b582]{height:20px;width:20px;object-fit:contain;filter:var(--background-invert-if-dark);align-self:center;margin:12px}