dick about with stats a bit

web/source/css/status.css

@@ -260,22 +260,100 @@
 			display: flex;
 			gap: 1rem;
 
-			.stats-grouping {
+			.stats-grouping,
+			.stats-more-info-content {
 				display: flex;
 				flex-wrap: wrap;
 				column-gap: 1rem;
-
+				row-gap: 0.25rem;
-				.edited-at {
-					font-size: smaller;
-				}
 			}
 
 			.stats-item {
 				display: flex;
 				gap: 0.4rem;
+				width: fit-content;
 			}
 
-			.stats-item.published-at {
+			details.stats-more-info {
+				z-index: 2;
+				margin-left: auto;
+				
+				& > summary {
+					/*
+						Remove details/summary
+						arrow and use our own.
+					*/
+					list-style: none;
+					&::-webkit-details-marker {
+						display: none; /* Safari */
+					}
+
+					/*
+						Don't display the
+						"hide" button initially.
+					*/
+					i.hide {
+						display: none;
+					}
+
+					/*
+						Normalize width and
+						alignment of fa icons.
+					*/
+					i.fa {
+						width: 2rem;
+						text-align: center;
+					}
+					display: flex;
+					height: 100%;
+					align-items: center;
+
+					cursor: pointer;
+					border-radius: $br-inner;
+					&:focus-visible {
+						outline: $button-focus-outline;
+					}
+
+					&:hover {
+						outline: 0.1rem solid $fg-reduced;
+					}
+				}
+
+				@keyframes fade-in {
+					0%    {opacity: 0}
+					100%  {opacity: 1}
+				}
+
+				&[open] {
+					.stats-more-info-content {
+						animation: fade-in .1s;
+					}
+
+					& > summary i.show {
+						display: none;
+					}
+
+					& > summary i.hide {
+						display: block;
+					}
+				}
+			}
+
+			.stats-more-info-content {
+				position: absolute;
+				right: 0;
+				flex-direction: column;
+				max-width: 100%;
+
+				background: $status-info-bg;
+				padding: 0.5rem 0.75rem;
+				border: $boxshadow-border;
+				box-shadow: $boxshadow;
+
+				opacity: 1;
+			}
+
+			.stats-item.published-at dd time.dt-published {
 				text-decoration: underline;
 			}
 
@@ -283,10 +361,6 @@
 				z-index: 1;
 				user-select: none;
 			}
-
-			.language {
-				margin-left: auto;
-			}
 		}
 
 		grid-column: span 3;
@@ -327,7 +401,8 @@
 
 	&.expanded {
 		background: $status-focus-bg;
-		.status-info {
+		.status-info,
+		.status-info .status-stats .stats-more-info-content {
 			background: $status-focus-info-bg;
 		}
 	}

web/template/status_info.tmpl

@@ -50,18 +50,41 @@
         <div class="stats-item published-at text-cutoff">
             <dt class="sr-only">Published</dt>
             <dd>
-                <time class="dt-published" datetime="{{- .CreatedAt -}}">{{- .CreatedAt | timestampPrecise -}}</time>
+                <time class="dt-published" datetime="{{- .CreatedAt -}}">{{- .CreatedAt | timestampPrecise -}}</time>{{- if .EditedAt }}*{{- end }}
             </dd>
         </div>
-        {{- if .EditedAt -}}
+        {{- if .Pinned }}
-        <div class="stats-item edited-at text-cutoff">
+        <div class="stats-item" title="Pinned">
-            <dt class="sr-only">Edited</dt>
+            <dt>
-            <dd>
+                <span class="sr-only">Pinned</span>
-                edited <time class="dt-updated" datetime="{{- .EditedAt -}}">{{- .EditedAt | timestampPrecise -}}</time>
+                <i class="fa fa-thumb-tack" aria-hidden="true"></i>
-            </dd>
+            </dt>
+            <dd class="sr-only">{{- .Pinned -}}</dd>
         </div>
-        {{ end }}
+        {{- else }}
+        {{- end }}
+    </div>
+    <details class="stats-more-info">
+        <summary title="More info">
+            <span class="sr-only">More info</span>
+            <i class="fa fa-chevron-right show" aria-hidden="true"></i>
+            <i class="fa fa-chevron-down hide" aria-hidden="true"></i>
+        </summary>
+        <div class="stats-more-info-content">
             <div class="stats-grouping">
+                {{- if .LanguageTag.DisplayStr }}
+                <div class="stats-item" title="{{ .LanguageTag.DisplayStr }}">
+                    <dt>
+                        <span class="sr-only">Language</span>
+                        <i class="fa fa-language" aria-hidden="true"></i>
+                    </dt>
+                    <dd>
+                        <span class="sr-only">{{ .LanguageTag.DisplayStr }}</span>
+                        <span aria-hidden="true">{{- .LanguageTag.TagStr -}}</span>
+                    </dd>
+                </div>
+                {{- else }}
+                {{- end }}
                 <div class="stats-item" title="Replies">
                     <dt>
                         <span class="sr-only">Replies</span>
@@ -83,27 +106,19 @@
                     </dt>
                     <dd>{{- .ReblogsCount -}}</dd>
                 </div>
-            {{- if .Pinned }}
+            </div>
-            <div class="stats-item" title="Pinned">
+            {{- if .EditedAt -}}
+            <div class="stats-item edited-at text-cutoff" title="Edited {{ .EditedAt -}}">
                 <dt>
-                    <span class="sr-only">Pinned</span>
+                    <span class="sr-only">Edited</span>
-                    <i class="fa fa-thumb-tack" aria-hidden="true"></i>
+                    <i class="fa fa-pencil" aria-hidden="true"></i>
                 </dt>
-                <dd class="sr-only">{{- .Pinned -}}</dd>
+                <dd class="text-cutoff">
-            </div>
+                    <time class="dt-updated" datetime="{{- .EditedAt -}}">{{- .EditedAt | timestampPrecise -}}</time>
-            {{- else }}
-            {{- end }}
-        </div>
-    </div>
-    {{- if .LanguageTag.DisplayStr }}
-    <div class="stats-item language" title="{{ .LanguageTag.DisplayStr }}">
-        <dt class="sr-only">Language</dt>
-        <dd>
-            <span class="sr-only">{{ .LanguageTag.DisplayStr }}</span>
-            <span aria-hidden="true">{{- .LanguageTag.TagStr -}}</span>
                 </dd>
             </div>
-    {{- else }}
+            {{ end }}
-    {{- end }}
+        </div>
+    </details>
 </dl>
 {{- end }}