@@ -429,23 +432,29 @@ function readPromo() {
cursor: default;
}
- > .avatar {
- flex-shrink: 0;
- display: block;
- margin: 0 14px 8px 0;
- width: 48px;
- height: 48px;
- position: relative;
- top: 0;
- left: 0;
+ .header-container {
+ display: flex;
+ > .avatar {
+ flex-shrink: 0;
+ display: block;
+ margin: 0 14px 8px 0;
+ width: 48px;
+ height: 48px;
+ position: relative;
+ top: 0;
+ left: 0;
+ }
+ > .header {
+ width: 0;
+ flex-grow: 1;
+ }
}
-
> .main {
flex: 1;
min-width: 0;
> .body {
- margin-top: .7em;
+ margin-top: .2em;
overflow: hidden;
margin-inline: -100px;
padding-inline: 100px;
@@ -535,7 +544,7 @@ function readPromo() {
}
> .files {
- margin-top: .7em;
+ margin-top: .4em;
margin-bottom: .4em;
}
> .url-preview {
diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue
index 9e6ee7edf..dd1f11eca 100644
--- a/packages/client/src/components/MkNoteHeader.vue
+++ b/packages/client/src/components/MkNoteHeader.vue
@@ -1,6 +1,5 @@
-
@@ -8,15 +7,15 @@
bot
+
+
+
-
@@ -60,17 +59,40 @@ defineProps<{
width: 0;
flex-grow: 1;
line-height: 1.5;
+ display: flex;
+ font-size: 1.2em;
> div {
- display: flex;
- align-items: center;
+ &:first-child {
+ flex-grow: 1;
+ width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ &:last-child {
+ max-width: 50%;
+ gap: .2em .5em;
+ }
+ .article > .main & {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ .username {
+ font-size: .9em;
+ }
+ &:last-child {
+ align-items: flex-end;
+ }
+ > * {
+ max-width: 100%;
+ }
+ }
}
.name {
- flex: 1 1 0px;
- display: block;
+ // flex: 1 1 0px;
+ display: inline;
margin: 0 .5em 0 0;
padding: 0;
overflow: hidden;
- font-size: 1.2em;
font-weight: bold;
text-decoration: none;
text-overflow: ellipsis;
@@ -91,7 +113,7 @@ defineProps<{
}
.username {
- flex: 1 1 0px;
+ display: inline;
margin: 0 .5em 0 0;
overflow: hidden;
text-overflow: ellipsis;
@@ -99,9 +121,24 @@ defineProps<{
}
.info {
+ display: inline-flex;
flex-shrink: 0;
- margin-left: auto;
+ margin-left: .5em;
font-size: 0.9em;
+ .created-at {
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+
+ .ticker {
+ display: inline-flex;
+ margin-left: .5em;
+ vertical-align: middle;
+ > .name {
+ display: none;
+ }
}
}
}