From 8c7ffcccc761be7f3ce451c2a9a1d3e37be5b976 Mon Sep 17 00:00:00 2001
From: Dave Falke <dfalke@uga.edu>
Date: Fri, 15 Nov 2024 14:50:12 -0500
Subject: [PATCH] Use NoteBox component, and fix overflow detection

---
 .../RecordTable/RecordTableDescription.jsx    | 40 +++++++++----------
 .../js/client/records/Sequences.tsx           | 19 +--------
 2 files changed, 21 insertions(+), 38 deletions(-)

diff --git a/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTableDescription.jsx b/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTableDescription.jsx
index 2351870a9b..d48f81183a 100644
--- a/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTableDescription.jsx
+++ b/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTableDescription.jsx
@@ -1,17 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { safeHtml, wrappable } from '../../../Utils/ComponentUtils';
-
-const containerStyle = {
-  display: 'flex',
-  flexWrap: 'wrap',
-  borderLeft: '.2em solid #79a3d7',
-  borderRight: '.2em solid #79a3d7',
-  padding: '.5em 1em',
-  background: '#ebf4ff',
-  gap: '1em',
-  marginBottom: '1em',
-};
+import { NoteBox } from '@veupathdb/coreui';
 
 function RecordTableDescription(props) {
   const { description } = props.table;
@@ -21,7 +11,7 @@ function RecordTableDescription(props) {
   if (!description) return null;
 
   return (
-    <div style={containerStyle}>
+    <NoteBox type="info">
       {safeHtml(
         description,
         {
@@ -30,7 +20,7 @@ function RecordTableDescription(props) {
               return;
             }
             if (
-              el.clientWidth >= el.scrollWidth ||
+              el.clientWidth >= el.scrollWidth &&
               el.clientHeight >= el.scrollHeight
             ) {
               setIsOverflowing(false);
@@ -51,15 +41,23 @@ function RecordTableDescription(props) {
         'div'
       )}
       {isOverflowing && (
-        <button
-          type="button"
-          className="link"
-          onClick={() => setIsExpanded((value) => !value)}
-        >
-          {isExpanded ? 'Read less' : 'Read more'}
-        </button>
+        <>
+          <button
+            type="button"
+            style={{
+              border: 'none',
+              padding: 0,
+              margin: '1ex 0 0 0',
+              background: 'transparent',
+              color: '#069',
+            }}
+            onClick={() => setIsExpanded((value) => !value)}
+          >
+            {isExpanded ? 'Read less' : 'Read more'}
+          </button>
+        </>
       )}
-    </div>
+    </NoteBox>
   );
 }
 
diff --git a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/Sequences.tsx b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/Sequences.tsx
index 1efea4f282..48ea0f26a5 100644
--- a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/Sequences.tsx
+++ b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/Sequences.tsx
@@ -31,6 +31,7 @@ import { PfamDomain } from 'ortho-client/components/pfam-domains/PfamDomain';
 import {
   FilledButton,
   FloatingButton,
+  NoteBox,
   OutlinedButton,
   SelectList,
   Undo,
@@ -662,23 +663,7 @@ export function RecordTable_Sequences(
         } as CSSProperties
       }
     >
-      {warningText && (
-        <div
-          style={{
-            display: 'flex',
-            flexWrap: 'wrap',
-            borderLeft: '.2em solid rgb(225, 133, 133)',
-            borderRight: '.2em solid rgb(225, 133, 133)',
-            padding: '.5em 1em',
-            background: 'rgb(255, 228, 228)',
-            gap: '1em',
-            marginBottom: '1em',
-            fontWeight: 500,
-          }}
-        >
-          {warningText}
-        </div>
-      )}
+      {warningText && <NoteBox type="error">{warningText}</NoteBox>}
       <div
         style={{
           padding: '10px',