Refactor VersionCheck modal size and layout

withstudiocms · Dec 22, 2024 · 05d518b · 05d518b
1 parent e74697c
commit 05d518b
Showing 1 changed file with 24 additions and 18 deletions.
diff --git a/packages/studiocms_dashboard/src/components/islands/sidebar/VersionCheck.astro b/packages/studiocms_dashboard/src/components/islands/sidebar/VersionCheck.astro
@@ -66,42 +66,39 @@ function dateWithTimeAndZone(date: Date) {
 { isAdmin && ( 
     <Modal id="version-modal" size="lg">
 
-        <h2 slot="header">
-            Version Information
-            <h3 class="inline-title">
-                <span>Last Update Check</span>    
-                <a href={StudioCMSRoutes.sdk.updateLatestVersionCache} 
-                    data-astro-prefetch="tap" 
-                    data-astro-reload class="reload-button" 
-                    title="Check for updates" 
-                    aria-label="Check for updates"
-                    ><span class="reload"></span>
-                </a>
-            </h3>
+        <h2 slot="header inline-title">
+            <span>Version Information</span>
+            <a href={StudioCMSRoutes.sdk.updateLatestVersionCache} 
+                data-astro-prefetch="tap" 
+                data-astro-reload class="reload-button" 
+                title="Check for updates" 
+                aria-label="Check for updates"
+                ><span class="reload"></span>
+            </a>
         </h2>
 
         <div>
             <div class="version-modal-top-row">
                 <div class="version-modal-col">
                     <span class="version-modal-col-title">Current Version</span>
-                    <span class="version-modal-col-value">v{currentVersion}</span>
+                    <code class="version-modal-col-value">v{currentVersion}</code>
                 </div>
 
                 <div class="version-modal-col">
                     <span class="version-modal-col-title">Latest Version</span>
-                    <span class="version-modal-col-value">v{latestVersion.version}</span>
+                    <code class="version-modal-col-value">v{latestVersion.version}</code>
                 </div>
 
                 <div class="version-modal-col">
                     <span class="version-modal-col-title">Last Update Check</span>
-                    <span class="version-modal-col-value">
+                    <code class="version-modal-col-value">
                         <time id="version-modal-last-checked-date" datetime={lastChecked.toISOString()}>{dateWithTimeAndZone(lastChecked)}</time>
                         <span class="latest-update-check">({timeAgo(lastChecked)})</span>
-                    </span>
+                    </code>
                 </div>
             </div>
 
-            <div>
+            <div class="version-modal-release-notes">
                 <StudioCMSRenderer content={changelog} />
             </div>
 
@@ -150,7 +147,7 @@ function dateWithTimeAndZone(date: Date) {
 
     .version-modal-top-row {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
         gap: 1rem;
     }
 
@@ -168,6 +165,15 @@ function dateWithTimeAndZone(date: Date) {
         font-weight: 700;
     }
 
+    .version-modal-release-notes {
+        margin-top: 1rem;
+        border: 1px solid hsl(var(--border));
+        border-radius: 0.5rem;
+        padding: 1rem;
+        overflow: auto;
+        max-height: 20vh;
+    }
+
     .latest-update-check {
         color: hsl(var(--text-muted));
         font-size: .7em;