Transition VersionInfo to tailwind

src/sidebar/components/VersionInfo.js

 import { LabeledButton } from '@hypothesis/frontend-shared';
+import classnames from 'classnames';
 
 import { copyText } from '../util/copy-to-clipboard';
 import { withServices } from '../service-context';
@@ -9,6 +10,27 @@ import { withServices } from '../service-context';
  * @prop {import('../services/toast-messenger').ToastMessengerService} toastMessenger
  */
 
+/**
+ * @param {Object} props
+ *   @param {string} props.label
+ *   @param {import('preact').ComponentChildren} props.children
+ *   @param {string} [props.classes]
+ */
+function VersionInfoItem({ label, children, classes }) {
+  return (
+    <>
+      <dt className="col-span-1 sm:text-right font-medium">{label}</dt>
+      <dd
+        className={classnames(
+          'col-span-1 sm:col-span-3 text-color-text-light break-words',
+          classes
+        )}
+      >
+        {children}
+      </dd>
+    </>
+  );
+}
 /**
  * Display current client version info
  *
@@ -25,22 +47,33 @@ function VersionInfo({ toastMessenger, versionData }) {
   };
 
   return (
-    <div className="hyp-u-vertical-spacing">
-      <dl className="VersionInfo">
-        <dt className="VersionInfo__key">Version</dt>
-        <dd className="VersionInfo__value">{versionData.version}</dd>
-        <dt className="VersionInfo__key">User Agent</dt>
-        <dd className="VersionInfo__value">{versionData.userAgent}</dd>
-        <dt className="VersionInfo__key">URL</dt>
-        <dd className="VersionInfo__value">{versionData.urls}</dd>
-        <dt className="VersionInfo__key">Fingerprint</dt>
-        <dd className="VersionInfo__value">{versionData.fingerprint}</dd>
-        <dt className="VersionInfo__key">Account</dt>
-        <dd className="VersionInfo__value">{versionData.account}</dd>
-        <dt className="VersionInfo__key">Date</dt>
-        <dd className="VersionInfo__value">{versionData.timestamp}</dd>
+    <div className="space-y-4">
+      <dl className="grid grid-cols-1 sm:grid-cols-4 sm:gap-x-2">
+        <VersionInfoItem label="Version">{versionData.version}</VersionInfoItem>
+        <VersionInfoItem label="User Agent">
+          {versionData.userAgent}
+        </VersionInfoItem>
+        <VersionInfoItem
+          classes={classnames(
+            // Intermittent odd overflow behavior in Safari causes long strings
+            // with no wrap points to break layout — `overflow-wrap: break-words`
+            // is not reliable in this case. Use `break-all` here, which causes
+            // more inelgant wrapping in all browsers, but is safely contained
+            // in the layout.
+            // See: https://github.com/hypothesis/client/issues/4469
+            'break-all'
+          )}
+          label="URL"
+        >
+          {versionData.urls}
+        </VersionInfoItem>
+        <VersionInfoItem label="Fingerprint">
+          {versionData.fingerprint}
+        </VersionInfoItem>
+        <VersionInfoItem label="Account">{versionData.account}</VersionInfoItem>
+        <VersionInfoItem label="Date">{versionData.timestamp}</VersionInfoItem>
       </dl>
-      <div className="hyp-u-layout-row--justify-center">
+      <div className="flex items-center justify-center">
         <LabeledButton onClick={copyVersionData} icon="copy">
           Copy version details
         </LabeledButton>

src/styles/sidebar/components/VersionInfo.scss

-@use '../../variables' as var;
-@use '../../mixins/layout';
-@use '../../mixins/responsive';
-
-.VersionInfo {
-  // Lay out version info as a column when viewport (sidebar) is narrow
-  @include layout.column;
-
-  &__key {
-    font-weight: 500;
-  }
-
-  &__value {
-    color: var.$color-text--light;
-  }
-
-  @media only screen and (min-width: 20em) {
-    // Change to a layout that puts key-value pairs on a single line
-    // when space allows
-    @include layout.row;
-    // Allow multiple lines of content
-    flex-wrap: wrap;
-
-    &__key {
-      flex-basis: 25%;
-      text-align: right;
-    }
-
-    &__value {
-      margin-left: 1em; // Space between key and value
-      flex-basis: 70%;
-      flex-grow: 1;
-      overflow-wrap: anywhere; // Keep long userids and urls from overflowing
-    }
-  }
-}

src/styles/sidebar/components/_index.scss

@@ -19,7 +19,6 @@
 @use './NotebookResultCount';
 @use './PaginationNavigation';
 @use './StyledText';
-@use './VersionInfo';
 
 // TODO: Evaluate all classes below after components have been converted to
 // Tailwind.

tailwind.config.mjs

@@ -169,6 +169,7 @@ export default {
       },
       screens: {
         touch: { raw: '(pointer: coarse)' },
+        sm: '360px',
         md: '480px',
         lg: '768px',
         // Narrow mobile screens