Refactor header layout and update checkbox styling and structure

- Modified the HTML structure to wrap the checkbox in a container for better alignment.
- Changed the checkbox label to "Pin Preview" for clarity.
- Updated CSS to use flexbox for the header layout and improve spacing for the checkbox.
- Prevent large images from disrupting the layout by setting max-width and max-height.

internal/previewserver/web/index.html

@@ -18,9 +18,11 @@
         <summary id="header-summary"></summary>
         <div id="header">
           <div id="header-meta"></div>
-          <label id="header-label">
-            <input type="checkbox" id="pin" /> Pin
-          </label>
+          <div id="checkbox-container">
+            <label id="pin-checkbox-label">
+              <input type="checkbox" id="pin" /> Pin Preview
+            </label>
+          </div>
         </div>
       </details>
     </div>

internal/previewserver/web/styles-dark.css

@@ -24,16 +24,23 @@ body {
   display: table-cell;
   vertical-align: middle;
 }
-
 #header {
-  position: relative;
-  padding: 10px;
+  display: flex;
+  align-items: flex-start;
+}
+
+#checkbox-container {
+  margin-left: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+#checkbox-container label {
+  margin-bottom: 5px;
 }
 
-#header-label {
-  position: absolute;
-  top: 10px;
-  right: 10px;
+img {
+  max-width: 100%;
 }
 
 pre {

internal/previewserver/web/styles.css

@@ -25,14 +25,22 @@ body {
 }
 
 #header {
-  position: relative;
-  padding: 10px;
+  display: flex;
+  align-items: flex-start;
+}
+
+#checkbox-container {
+  margin-left: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+#checkbox-container label {
+  margin-bottom: 5px;
 }
 
-#header-label {
-  position: absolute;
-  top: 10px;
-  right: 10px;
+img {
+  max-width: 100%;
 }
 
 pre {