Frontend: Fixed note header rendering

fe_calckey/frontend/client/src/components/MagNoteHeader.vue

@@ -74,10 +74,10 @@ const showTicker =
     display: flex;
     align-items: center;
     white-space: nowrap;
-    justify-self: flex-end;
     border-radius: 100px;
     font-size: 0.8em;
     text-shadow: 0 2px 2px var(--shadow);
+    gap: 0 0.1em;
 
     > .avatar {
         width: 3.7em;
@@ -99,6 +99,8 @@ const showTicker =
                 overflow: hidden;
                 text-overflow: ellipsis;
                 gap: 0.1em 0;
+                display: flex;
+                flex-wrap: wrap;
             }
 
             &:last-child {
@@ -151,7 +153,6 @@ const showTicker =
             margin: 0 0.5em 0 0;
             overflow: hidden;
             text-overflow: ellipsis;
-            align-self: flex-start;
             font-size: 0.9em;
         }
 

fe_calckey/frontend/client/src/components/MkInstanceTicker.vue

@@ -4,7 +4,7 @@
         v-tooltip="
             capitalize(
                 magTransProperty(instance, 'software_name', 'softwareName') ??
-                    '?',
+                    '?'
             )
         "
         ref="ticker"
@@ -40,7 +40,7 @@ const instance = props.instance ?? {
     name: instanceName,
     themeColor: (
         document.querySelector(
-            'meta[name="theme-color-orig"]',
+            'meta[name="theme-color-orig"]'
         ) as HTMLMetaElement
     )?.content,
     softwareName: (Instance.softwareName || "Magnetar") as string | null,
@@ -61,18 +61,18 @@ const bg = {
 };
 
 function getInstanceIcon(
-    instance?: Misskey.entities.User["instance"] | types.InstanceTicker | null,
+    instance?: Misskey.entities.User["instance"] | types.InstanceTicker | null
 ): string {
     if (!instance) return "/client-assets/dummy.png";
 
     return (
         getProxiedImageUrlNullable(
             magTransProperty(instance, "icon_url", "iconUrl"),
-            "preview",
+            "preview"
         ) ??
         getProxiedImageUrlNullable(
             magTransProperty(instance, "favicon_url", "faviconUrl"),
-            "preview",
+            "preview"
         ) ??
         "/client-assets/dummy.png"
     );
@@ -90,6 +90,7 @@ function getInstanceIcon(
     font-size: 0.8em;
     text-shadow: 0 2px 2px var(--shadow);
     overflow: hidden;
+
     .header > .body & {
         width: max-content;
         max-width: 100%;
@@ -108,11 +109,9 @@ function getInstanceIcon(
         font-weight: bold;
         text-overflow: ellipsis;
         white-space: nowrap;
-        text-shadow:
-            -1px -1px 0 var(--bg),
-            1px -1px 0 var(--bg),
-            -1px 1px 0 var(--bg),
-            1px 1px 0 var(--bg);
+        text-shadow: -1px -1px 0 var(--bg), 1px -1px 0 var(--bg),
+            -1px 1px 0 var(--bg), 1px 1px 0 var(--bg);
+
         .article > .main &,
         .header > .body & {
             display: unset;