split oauth_tokens.claims column up; improved fonts; allow multiple sse connections per user; make navbar and use friendly

styles/index.css

@@ -16,8 +16,7 @@
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
     --text-3xl: 1.875rem;
-    --text-5xl: 3rem;
-    --text-8xl: 6rem;
+    --text-6xl: 3.75rem;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --radius-lg: var(--radius);
@@ -187,6 +186,30 @@
   .static {
     position: static;
   }
+  .col-2 {
+    grid-column: 2;
+  }
+  .col-3 {
+    grid-column: 3;
+  }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
   .m-\[1em\] {
     margin: 1em;
   }
@@ -220,12 +243,18 @@
   .flex {
     display: flex;
   }
+  .grid {
+    display: grid;
+  }
   .hidden {
     display: none;
   }
   .table {
     display: table;
   }
+  .max-h-full {
+    max-height: 100%;
+  }
   .min-h-full {
     min-height: 100%;
   }
@@ -244,6 +273,12 @@
   .grow {
     flex-grow: 1;
   }
+  .grow-1 {
+    flex-grow: 1;
+  }
+  .basis-\[fit-content\] {
+    flex-basis: fit-content;
+  }
   .basis-full {
     flex-basis: 100%;
   }
@@ -253,6 +288,9 @@
   .resize {
     resize: both;
   }
+  .grid-cols-\[6rem_10fr_6rem\] {
+    grid-template-columns: 6rem 10fr 6rem;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -271,8 +309,8 @@
   .overflow-x-auto {
     overflow-x: auto;
   }
-  .overflow-x-scroll {
-    overflow-x: scroll;
+  .overflow-x-hidden {
+    overflow-x: hidden;
   }
   .overflow-y-hidden {
     overflow-y: hidden;
@@ -302,9 +340,6 @@
   .p-\[1em\] {
     padding: 1em;
   }
-  .p-\[2em\] {
-    padding: 2em;
-  }
   .pt-\[1em\] {
     padding-top: 1em;
   }
@@ -314,6 +349,9 @@
   .text-center {
     text-align: center;
   }
+  .font-display {
+    font-family: var(--display-family);
+  }
   .text-lg {
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -380,6 +418,16 @@
       text-decoration-line: none;
     }
   }
+  .min-\[400px\]\:px-\[calc\(10vw-0\.5em\)\] {
+    @media (width >= 400px) {
+      padding-inline: calc(10vw - 0.5em);
+    }
+  }
+  .min-\[400px\]\:py-\[calc\(8vw-0\.5em\)\] {
+    @media (width >= 400px) {
+      padding-block: calc(8vw - 0.5em);
+    }
+  }
 }
 @layer base {
   select {
@@ -560,23 +608,23 @@
     font-weight: var(--display-weight);
   }
   h1 {
-    font-size: var(--text-8xl);
+    font-size: var(--text-6xl);
   }
   h2 {
-    font-size: var(--text-5xl);
-  }
-  h3 {
     font-size: var(--text-3xl);
   }
-  h4 {
+  h3 {
     font-size: var(--text-xl);
   }
-  h5 {
+  h4 {
     font-size: var(--text-lg);
   }
-  h6 {
+  h5 {
     font-size: var(--text-md);
   }
+  h6 {
+    font-size: var(--text-sm);
+  }
   ul, ol {
     list-style: none;
   }

styles/typography.css

@@ -272,23 +272,23 @@
 	}
 
 	h1 {
-		font-size: var(--text-8xl);
+		font-size: var(--text-6xl);
 	}
 	h2 {
-		font-size: var(--text-5xl);
-	}
-	h3 {
 		font-size: var(--text-3xl);
 	}
-	h4 {
+	h3 {
 		font-size: var(--text-xl);
 	}
-	h5 {
+	h4 {
 		font-size: var(--text-lg);
 	}
-	h6 {
+	h5 {
 		font-size: var(--text-md);
 	}
+	h6 {
+		font-size: var(--text-sm);
+	}
 
 	ul, ol {
 		list-style: none;