Better sidebar header css styling

Use sticky header which removes some hard-coded pixel positions and should work in safari.

components/Sidebar.tsx

@@ -65,10 +65,12 @@ const Sidebar: React.FC<Props> = ({
   if (selectedCell) {
     return (
       <div className={styles.sidebar}>
-        <button className={styles.close} onClick={onClose}>
+        <div className={styles["sidebar-header"]}>
-          ✖
+          <button className={styles.close} onClick={onClose}>
-        </button>
+            ✖
-        <h1>
+          </button>
+        </div>
+        <h1 className={styles["cell-name-header"]}>
           Cell {selectedCell.x}, {selectedCell.y}
         </h1>
         {renderCellData(selectedCell)}
@@ -78,9 +80,11 @@ const Sidebar: React.FC<Props> = ({
     const modId = parseInt(router.query.mod as string, 10);
     return (
       <div className={styles.sidebar}>
-        <button className={styles.close} onClick={onClose}>
+        <div className={styles["sidebar-header"]}>
-          ✖
+          <button className={styles.close} onClick={onClose}>
-        </button>
+            ✖
+          </button>
+        </div>
         {!Number.isNaN(modId) && renderModData(modId)}
       </div>
     );

styles/ModData.module.css

@@ -4,4 +4,5 @@
 
 a.name {
   line-height: 1.75rem;
+  word-wrap: break-word;
 }

styles/Sidebar.module.css

@@ -25,25 +25,29 @@
   }
 }
 
+.sidebar-header {
+  position: sticky;
+  top: 0px;
+  width: 100%;
+}
+
 .close {
-  position: fixed;
+  position: absolute;
-  top: 4px;
+  display: block;
-  left: 240px;
+  top: 0px;
+  right: 0px;
   font-size: 24px;
-  margin-left: 12px;
   border: none;
   background: none;
   cursor: pointer;
-}
+  margin-top: -16px;
-
-@media only screen and (max-width: 600px) {
-  .close {
-    top: calc(55% + 8px);
-    left: initial;
-    right: 12px;
-  }
 }
 
 .close:hover {
   color: #888888;
 }
+
+.cell-name-header {
+  line-height: 1.75rem;
+  word-wrap: break-word;
+}