AkkomaGang/akkoma-fe
4
13
Fork 57
Code Issues 75 Pull requests 15 Projects Releases 1 Wiki Activity

status component: Fix repeater name overflowing #383

Open
yukijoou wants to merge 1 commit from yukijoou/akkoma-fe:fix-status-usernames into develop
pull from: yukijoou/akkoma-fe:fix-status-usernames
merge into: AkkomaGang:develop
Conversation 1 Commits 1 Files changed 2 +23 -8
2 changed files with 23 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/status/status.scss
View file

@ -266,6 +266,16 @@
color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen);
}
.right-side {
display: flex;
align-items: center;
gap: 0.3em;
}
.repeat-tooltip {
flex-shrink: 0;
}
}
.repeater-avatar {

21
src/components/status/status.vue
View file

@ -83,7 +83,7 @@
:user="statusoid.user"
/>
<div class="right-side faint">
<span
<div
class="status-username repeater-name"
:title="retweeter"
>
@ -100,14 +100,19 @@
v-else
:to="retweeterProfileLink"
>{{ retweeter }}</router-link>
</span>
</div>
{{ ' ' }}
<FAIcon
icon="retweet"
class="repeat-icon"
:title="$t('tool_tip.repeat')"
/>
{{ $t('timeline.repeated') }}
<div
class="repeat-tooltip"
>
<FAIcon
icon="retweet"
class="repeat-icon"
:title="$t('tool_tip.repeat')"
/>
yukijoou marked this conversation as resolved Outdated
Oneric commented 2024-05-17 16:42:44 +00:00
Outdated
Review
Copy link

This only includes the actual “repeated” text into the flex-shrink: 0; section. Testing the change shows the icon doesn’t get hidden regardless. Do you think it’d make sense to still include the icon into the flex-shrink: 0; section anyway to better communicate the desired output (not hiding the icon)?

This only includes the actual “repeated” _text_ into the `flex-shrink: 0;` section. Testing the change shows the icon doesn’t get hidden regardless. Do you think it’d make sense to still include the icon into the `flex-shrink: 0;` section anyway to better communicate the desired output (not hiding the icon)?
yukijoou commented 2024-05-17 23:18:51 +00:00
Outdated
Review
Copy link

indeed, seems like this would be cleaner!

indeed, seems like this would be cleaner!
{{ $t('timeline.repeated') }}
</div>
</div>
</div>