Long Pool Names

apps/zui/src/components/forms.module.css

@@ -1,188 +1,190 @@
 .form label {
-    display: block;
-    font-weight: bold;
-    padding-left: var(--form-border-radius);
+  display: block;
+  font-weight: bold;
+  padding-left: var(--form-border-radius);
 }
 
 .form input,
 .form textarea,
 .form select {
-    display: block;
-    width: 100%;
-    height: var(--form-height);
-    border-radius: var(--form-border-radius);
-    background: var(--form-bg-color);
-    border: var(--form-border);
-    line-height: var(--form-line-height);
-    padding: var(--form-padding);
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  height: var(--form-height);
+  border-radius: var(--form-border-radius);
+  background: var(--form-bg-color);
+  border: var(--form-border);
+  line-height: var(--form-line-height);
+  padding: var(--form-padding);
 }
 
 .form input:focus-visible {
-    outline: none;
-    border-color: var(--primary-color);
+  outline: none;
+  border-color: var(--primary-color);
 }
 
 .form input:disabled {
-    background: var(--border-color);
-    background: transparent;
-    border-color: transparent;
-    color: currentColor;
+  background: var(--border-color);
+  background: transparent;
+  border-color: transparent;
+  color: currentColor;
 }
 
 .form fieldset {
-    border: none;
-    margin-left: 6px;
-    border-left: 1px solid var(--border-color);
-    padding: 18px;
-    display: grid;
-    gap: var(--form-field-gap);
+  border: none;
+  margin-left: 6px;
+  border-left: 1px solid var(--border-color);
+  padding: 18px;
+  display: grid;
+  gap: var(--form-field-gap);
 }
 
 .form .fields {
-    display: flex;
-    flex-direction: column;
-    gap: var(--form-field-gap);
+  display: flex;
+  flex-direction: column;
+  gap: var(--form-field-gap);
 }
 
 .form .horizontalFields {
-    flex-direction: column;
-    gap: var(--form-field-gap);
-    display: flex;
+  flex-direction: column;
+  gap: var(--form-field-gap);
+  display: flex;
 }
 
-.form .horizontalFields>* {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
+.form .horizontalFields > * {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 }
 
-.form .horizontalFields>*>*:not(label) {
-    max-width: 50%;
+.form .horizontalFields > * > *:not(label) {
+  max-width: 50%;
 }
 
 .form select {
-    appearance: none;
-    background-image: url(/select-input-arrow.svg);
-    background-repeat: no-repeat;
-    background-size: 1.2em 1.2em;
-    background-position: calc(100% - 10px) center;
+  appearance: none;
+  background-image: url(/select-input-arrow.svg);
+  background-repeat: no-repeat;
+  background-size: 1.2em 1.2em;
+  background-position: calc(100% - 10px) center;
 }
 
 .form .cancel {
-    text-decoration: underline;
-    cursor: pointer;
+  text-decoration: underline;
+  cursor: pointer;
 }
 
 .form .submit {
-    height: var(--form-height);
-    border-radius: var(--form-border-radius);
-    background: var(--form-bg-color);
-    line-height: var(--form-line-height);
-    padding: var(--form-padding);
-    background: var(--primary-color);
-    border: 1px solid var(--primary-color-dark);
-    color: white;
-    font-weight: 500;
-    min-width: 80px;
-    user-select: none;
+  height: var(--form-height);
+  border-radius: var(--form-border-radius);
+  background: var(--form-bg-color);
+  line-height: var(--form-line-height);
+  padding: var(--form-padding);
+  background: var(--primary-color);
+  border: 1px solid var(--primary-color-dark);
+  color: white;
+  font-weight: 500;
+  min-width: 80px;
+  user-select: none;
 }
 
 .form .submit:hover:not(:disabled) {
-    background: var(--primary-color-dark);
+  background: var(--primary-color-dark);
 }
 
 .form .submit:active:not(:disabled) {
-    box-shadow: none;
-    transform: translateY(1px);
+  box-shadow: none;
+  transform: translateY(1px);
 }
 
 .form .button:active:not(:disabled) {
-    background: var(--primary-color-darker);
+  background: var(--primary-color-darker);
 }
 
 .form .button {
-    height: var(--form-height);
-    border-radius: var(--form-border-radius);
-    background: var(--form-bg-color);
-    line-height: var(--form-line-height);
-    padding: var(--form-padding);
-    border: 1px solid var(--border-color);
-    box-shadow: 0 3px 4px -4px var(--bg-color-less);
-    font-weight: 500;
-    min-width: 80px;
-    user-select: none;
+  height: var(--form-height);
+  border-radius: var(--form-border-radius);
+  background: var(--form-bg-color);
+  line-height: var(--form-line-height);
+  padding: var(--form-padding);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 3px 4px -4px var(--bg-color-less);
+  font-weight: 500;
+  min-width: 80px;
+  user-select: none;
 }
 
 .form .button:hover:not(:disabled) {
-    background: var(--form-bg-color-dark);
+  background: var(--form-bg-color-dark);
 }
 
 .form .button:active:not(:disabled) {
-    background: var(--form-bg-color-darker);
+  background: var(--form-bg-color-darker);
 }
 
 .form .button:active:not(:disabled) {
-    box-shadow: none;
-    transform: translateY(1px);
+  box-shadow: none;
+  transform: translateY(1px);
 }
 
 .form .button:disabled,
 .form .submit:disabled {
-    opacity: 0.4;
-    cursor: no-drop
+  opacity: 0.4;
+  cursor: no-drop;
 }
 
-.form input[type=checkbox] {
-    appearance: none;
-    margin: 0;
-    width: 1.15em;
-    height: 1.15em;
-    border-radius: 0.15em;
+.form input[type="checkbox"] {
+  appearance: none;
+  margin: 0;
+  width: 1.15em;
+  height: 1.15em;
+  border-radius: 0.15em;
 }
 
 .form .actionLabel {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-right: var(--form-border-radius);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: var(--form-border-radius);
 }
 
 .form .actionLabel a {
-    text-decoration: underline;
-    cursor: pointer;
-    color: var(--fg-color-less);
+  text-decoration: underline;
+  cursor: pointer;
+  color: var(--fg-color-less);
 }
 
 .form .radioInput {
-    display: grid;
-    grid-template-columns: 1.1em auto;
-    align-items: center;
-    padding-top: 0;
-    padding: var(--form-padding);
-    height: 1.6em;
+  display: grid;
+  grid-template-columns: 1.1em auto;
+  align-items: center;
+  padding-top: 0;
+  padding: var(--form-padding);
+  height: 1.6em;
 }
 
 .form .radioInput label {
-    font-weight: 400;
+  font-weight: 400;
 }
 
 .form .submission {
-    display: flex;
-    justify-content: space-between;
-    margin-top: calc(var(--form-field-gap) * 3)
+  display: flex;
+  justify-content: space-between;
+  margin-top: calc(var(--form-field-gap) * 3);
 }
 
 .form .error {
-    background: #fde2d8;
-    color: #a81f07;
-    border-radius: 6px;
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+  background: #fde2d8;
+  color: #a81f07;
+  border-radius: 6px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
 .form input[readonly] {
-    border: none;
-    padding: 0 var(--form-border-radius);
+  border: none;
+  padding: 0 var(--form-border-radius);
 }

apps/zui/src/css/_global.scss

@@ -2,6 +2,7 @@
 *::before,
 *::after {
   box-sizing: border-box;
+  overflow-wrap: break-word;
 }
 
 * {
@@ -80,6 +81,7 @@ button {
   height: 0.75rem;
 }
 
+
 *::-webkit-scrollbar-track {
   background-color: var(--emphasis-bg-less);
 }
@@ -93,3 +95,11 @@ button {
 *::-webkit-scrollbar-corner {
   background-color: var(--emphasis-bg-less);
 }
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  font-family: var(--mono-font);
+}

apps/zui/src/css/_utilities.scss

@@ -69,3 +69,7 @@
 .border\:bottom {
     border-bottom: 1px solid var(--border-color);
 }
+
+.min-height\:full {
+    min-height: 100%;
+}

apps/zui/src/views/pool-page/details.tsx

@@ -1,13 +1,14 @@
 import React from "react"
 import {Pool} from "src/app/core/pools/pool"
 import styles from "./details.module.css"
+import classNames from "classnames"
 
 export function Details({pool}: {pool: Pool}) {
   const keys = pool.keys.map((k) => (k ? k.join(".") : "null"))
   return (
     <section className={styles.details}>
       <h2 className={styles.title}>Pool Details</h2>
-      <div className={styles.list}>
+      <div className={classNames(styles.list, "stack--1")}>
         <dl>
           <dt>ID </dt>
           <dd>{pool.id}</dd>