Fixed format table vertical text on safari (#17)

Author: Devaniti

source/GUI/html/default.js

@@ -158,12 +158,9 @@ button:disabled {
     top: 0;
 }
 
-.FormatTable tr:nth-of-type(1) td {
+.vertical-text {
     writing-mode: vertical-rl;
-}
-
-.FormatTable tr:nth-of-type(1) td:nth-of-type(1) {
-    writing-mode: horizontal-tb;
+    white-space: pre;
 }
 
 @media (prefers-color-scheme: dark) {

source/frontend/assets/css/report_table.css

@@ -2,7 +2,6 @@ import * as Properties from "./properties.mjs"
 import * as Constants from "./constants.mjs"
 
 const Headers = [
-    "Format",
     "Supported",
     "Buffer",
     "Vertex Buffer",
@@ -200,6 +199,16 @@ const RequiredSupport = {
     "115": { "Support1": 8655856, "Support2": 512 },
 }
 
+function AddVerticalCell(row, text) {
+    let cell = document.createElement("td")
+    let cellText = document.createElement("div")
+    cellText.textContent = text
+    cellText.className = "vertical-text"
+    cell.appendChild(cellText)
+    row.appendChild(cell)
+    return cell
+}
+
 function AddCell(row, text) {
     let cell = document.createElement("td")
     cell.textContent = text
@@ -255,8 +264,9 @@ export function BuildFormatTable(reportContainer, tableContainer) {
 
     const headerRow = document.createElement("tr")
 
+    AddCell(headerRow, "Format")
     for (const header of Headers) {
-        AddCell(headerRow, header)
+        AddVerticalCell(headerRow, header)
     }
 
     table.appendChild(headerRow)