hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix overflows and small screens

Browse source
This commit is contained in:
Henry Jameson 2025-07-30 10:00:03 +03:00
commit add9535b1a
3 changed files with 14 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/user_card/user_card.scss
View file

@ -67,7 +67,7 @@
width: calc(100% + 2.4em); width: calc(100% + 2.4em);
margin-left: -1.2em; margin-left: -1.2em;
margin-right: -1.2em; margin-right: -1.2em;
margin-top: -1.2em; margin-top: -3.2em;
margin-bottom: -4.5em; margin-bottom: -4.5em;
aspect-ratio: 3; aspect-ratio: 3;
padding: 0; padding: 0;
@ -149,6 +149,7 @@
position: relative; position: relative;
margin: 0.6em; margin: 0.6em;
margin-bottom: 0; margin-bottom: 0;
text-align: right;
.user-identity { .user-identity {
min-width: 0; min-width: 0;
@ -180,13 +181,12 @@
} }
.other-actions { .other-actions {
position: absolute; position: relative;
top: 0; display: inline-grid;
right: 0;
display: grid;
grid-auto-flow: column; grid-auto-flow: column;
grid-gap: 0.6em; grid-gap: 0.6em;
font-size: 110%; font-size: 110%;
z-index: 2;
a, button, div { a, button, div {
text-align: center; text-align: center;
@ -350,8 +350,9 @@
.user-interactions { .user-interactions {
position: relative; position: relative;
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(17%, min-content)); grid-template-columns: repeat(auto-fit, minmax(7.5em, 20%));
grid-gap: 0.6em; grid-gap: 0.6em;
max-width: 98vw;
.popover-trigger-button, .moderation-tools-button { .popover-trigger-button, .moderation-tools-button {
width: 100%; width: 100%;

14
src/components/user_card/user_card.vue
View file

@ -5,11 +5,6 @@
> >
<div :class="onClose ? '' : 'panel-heading -flexible-height'" class="user-card-inner"> <div :class="onClose ? '' : 'panel-heading -flexible-height'" class="user-card-inner">
<div class="user-info"> <div class="user-info">
<div
:class="{ 'hide-bio': hideBio }"
:style="style"
class="background-image"
/>
<div class="other-actions"> <div class="other-actions">
<button <button
v-if="!isOtherUser && user.is_local" v-if="!isOtherUser && user.is_local"
@ -61,6 +56,11 @@
/> />
</button> </button>
</div> </div>
<div
:class="{ 'hide-bio': hideBio }"
:style="style"
class="background-image"
/>
<div class="user-identity"> <div class="user-identity">
<a <a
v-if="avatarAction === 'zoom'" v-if="avatarAction === 'zoom'"
@ -106,7 +106,7 @@
class="user-screen-name" class="user-screen-name"
:user="user" :user="user"
/> />
<template v-if="!hideBio"> <div class="tags" v-if="!hideBio">
<span <span
v-if="user.deactivated" v-if="user.deactivated"
class="alert neutral user-role" class="alert neutral user-role"
@ -131,7 +131,7 @@
> >
{{ $t('user_card.group') }} {{ $t('user_card.group') }}
</span> </span>
</template> </div>
<span v-if="user.locked"> <span v-if="user.locked">
<FAIcon <FAIcon
class="lock-icon" class="lock-icon"

4
src/components/user_popover/user_popover.vue
View file

@ -37,10 +37,6 @@
overflow: hidden; overflow: hidden;
padding: 0.6em; padding: 0.6em;
.user-info {
width: 30em;
}
.background-image { .background-image {
max-height: 6em; max-height: 6em;
margin-bottom: -4.5em; margin-bottom: -4.5em;