diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 2a40f0dde..fd4d68b9f 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -23,6 +23,7 @@
.status-container {
display: flex;
padding: var(--status-margin);
+ gap: var(--status-margin);
> * {
min-width: 0;
@@ -50,12 +51,11 @@
}
.left-side {
- margin-right: var(--status-margin);
+ flex: 0 0 auto;
}
.right-side {
- flex: 1;
- min-width: 0;
+ flex: 1 1 auto;
}
.usercard {
@@ -230,29 +230,47 @@
}
.repeat-info {
+ display: flex;
+ align-items: center;
padding: 0.4em var(--status-margin);
- .repeat-icon {
- color: var(--cGreen);
+ .repeater-avatar {
+ flex: 0 0 1.5em;
+ border-radius: var(--roundness);
+ margin-left: 2em; // 3.5 (poster avatar size) - 1.5 (repeater avatar size)
+ width: 1.5em;
+ height: 1.5em;
}
- }
- .repeater-avatar {
- border-radius: var(--roundness);
- margin-left: 2em; // 3.5 (poster avatar size) - 1.5 (repeater avatar size)
- width: 1.5em;
- height: 1.5em;
- }
+ .right-side {
+ display: flex;
+ flex: 1 1 auto;
+ overflow-x: hidden;
+ text-overflow: ellipsis;
+ margin-right: 0;
+ gap: 0.5em;
- .repeater-name {
- text-overflow: ellipsis;
- margin-right: 0;
+ .repeater-name {
+ flex: 0 1 auto;
+ margin: 0;
+ }
- .emoji {
- width: 1em;
- height: 1em;
- vertical-align: middle;
- object-fit: contain;
+ .repeat-label {
+ white-space: nowrap;
+ flex: 0 0 auto;
+
+ .repeat-icon {
+ vertical-align: middle;
+ color: var(--cGreen);
+ }
+ }
+
+ .emoji {
+ width: 1em;
+ height: 1em;
+ vertical-align: middle;
+ object-fit: contain;
+ }
}
}
@@ -371,21 +389,4 @@
text-decoration: underline;
}
}
-
- @media all and (width <= 800px) {
- .repeater-avatar {
- margin-left: 20px;
- }
-
- .post-avatar {
- width: 40px;
- height: 40px;
-
- // TODO define those other way somehow?
- &.-compact {
- width: 32px;
- height: 32px;
- }
- }
- }
}
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 015a7017c..1e990c9c3 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -88,13 +88,14 @@
:to="retweeterProfileLink"
>{{ retweeter }}
- {{ ' ' }}
-