show creator in magazine view

dist/styles/cards.css

@@ -1,4 +1,5 @@
 .info {
+    display: flex;
     position: relative;
     margin: 10px 12px;
     line-height: 16px;
@@ -12,13 +13,20 @@
     font-size: 12px;
     vertical-align: top;
     display: inline-block;
-    max-width: 144px;
+    flex-grow: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+.info span.creator {
+    color: var(--neutralSecondaryAlt);
+}
+.info span.creator::before {
+    display: inline-block;
+    content: "/";
+    margin: 0 5px;
+}
 .info span.time {
-    float: right;
     font-size: 12px;
 }
 
@@ -26,7 +34,6 @@
     display: block;
     width: 16px;
     height: 16px;
-    float: right;
     text-align: center;
 }
 .read-indicator::after {
@@ -81,7 +88,7 @@
     background: #0003;
 }
 .card span.h {
-    background: #fce100b0;
+    background: #fce10080;
 }
 
 .default-card {

src/components/cards/info.tsx

@@ -7,15 +7,21 @@ type CardInfoProps = {
     source: RSSSource
     item: RSSItem
     hideTime?: boolean
+    showCreator?: boolean
 }
 
 const CardInfo: React.FunctionComponent<CardInfoProps> = (props) => (
     <p className="info">
         {props.source.iconurl ? <img src={props.source.iconurl} /> : null}
-        <span className="name">{props.source.name}</span>
-        {props.hideTime ? null : <Time date={props.item.date} />}
-        {props.item.hasRead ? null : <span className="read-indicator"></span>}
+        <span className="name">
+            {props.source.name}
+            {props.showCreator && props.item.creator && (
+                <span className="creator">{props.item.creator}</span>
+            )}
+        </span>
         {props.item.starred ? <span className="starred-indicator"></span> : null}
+        {props.item.hasRead ? null : <span className="read-indicator"></span>}
+        {props.hideTime ? null : <Time date={props.item.date} />}
     </p>
 )
 

src/components/cards/magazine-card.tsx

@@ -24,7 +24,7 @@ const MagazineCard: React.FunctionComponent<Card.Props> = (props) => (
                 <h3 className="title"><Highlights text={props.item.title} keyword={props.keyword} title /></h3>
                 <p className="snippet"><Highlights text={props.item.snippet} keyword={props.keyword} /></p>
             </div>
-            <CardInfo source={props.source} item={props.item} />
+            <CardInfo source={props.source} item={props.item} showCreator />
         </div>
     </div>
 )