From 810212f4d867375800f0e075019735a68425d5d4 Mon Sep 17 00:00:00 2001
From: Mario Martins <mario.andre.m@gmail.com>
Date: Fri, 31 Oct 2025 14:38:47 +0000
Subject: [PATCH 1/3] adjustments to elements in the candidate profile item
 page

---
 .../candidate_profile/jsx/CandidateInfo.js    |  8 +-
 .../instruments/jsx/VisitInstrumentList.js    | 74 ++++++++++---------
 modules/media/jsx/CandidateMediaWidget.js     |  2 +-
 3 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/modules/candidate_profile/jsx/CandidateInfo.js b/modules/candidate_profile/jsx/CandidateInfo.js
index 0cddef876d4..90598024f8c 100644
--- a/modules/candidate_profile/jsx/CandidateInfo.js
+++ b/modules/candidate_profile/jsx/CandidateInfo.js
@@ -166,9 +166,11 @@ class CandidateInfo extends Component {
     const renderTerm = (label, value, info) => {
       const cardStyle = {
         width: info.width || '6em',
-        padding: '1em',
-        marginLeft: '1ex',
-        marginRight: '1ex',
+        padding: '1rem 0',
+        marginLeft: '0.5rem',
+        marginRight: '0.5rem',
+        wordBreak: 'break-word',
+        flexGrow: 1,
       };
       let valueStyle = {};
       if (info.valueWhitespace) {
diff --git a/modules/instruments/jsx/VisitInstrumentList.js b/modules/instruments/jsx/VisitInstrumentList.js
index 46c32812ffb..31b84f8f6a0 100644
--- a/modules/instruments/jsx/VisitInstrumentList.js
+++ b/modules/instruments/jsx/VisitInstrumentList.js
@@ -135,15 +135,16 @@ class VisitInstrumentList extends Component {
     };
     flexcontainer.justifyContent = 'flex-start';
 
-    let center = {
+    let titleText = {
       display: 'flex',
-      width: '12%',
-      height: '100%',
+      width: '100%',
       alignItems: 'center',
-      justifyContent: 'center',
+      textAlign: 'left',
+      wordBreak: 'break-word',
+      padding: '1rem',
     };
 
-    const termstyle = {paddingLeft: '2em', paddingRight: '2em'};
+    const termstyle = {padding: '1rem 1.5em', flexGrow: 1};
 
     let instruments = null;
     if (!this.state.instruments) {
@@ -252,37 +253,38 @@ class VisitInstrumentList extends Component {
         onMouseLeave={this.toggleHover}
       >
         <div style={flexcontainer}>
-          <div style={{background: bg, width: '1%', height: '100%'}}>
-          </div>
-          <div style={center}>
-            <h4 style={{width: '100%', padding: 0, margin: 0}}>
-              <a href={this.props.BaseURL
-                            + '/instrument_list/?candID='
-                            + this.props.Candidate.Meta.CandID
-                            + '&sessionID='
-                            + this.props.VisitMap[this.props.Visit.Meta.Visit]}>
-                {this.props.Visit.Meta.Visit}
-              </a>
-            </h4>
-          </div>
-          <div>
-            <dl style={defliststyle}>
-              <div style={termstyle}>
-                <dt>Cohort</dt>
-                <dd>{this.props.Visit.Meta.Battery}</dd>
-              </div>
-              <div style={termstyle}>
-                <dt>Site</dt>
-                <dd>{this.props.Visit.Meta.Site}</dd>
-              </div>
-              {vdate}
-              {vage}
-              <div style={termstyle}>
-                <dt>Status</dt>
-                <dd>{vstatus}</dd>
-              </div>
-            </dl>
-            {instruments}
+          <div style={{background: bg, width: '1%', height: '100%'}}></div>
+          <div style={{width: '100%'}}>
+            <div style={titleText}>
+              <h4 style={{width: '100%', padding: 0, margin: 0}}>
+                <a href={this.props.BaseURL
+                        + '/instrument_list/?candID='
+                        + this.props.Candidate.Meta.CandID
+                        + '&sessionID='
+                        + this.props.VisitMap[this.props.Visit.Meta.Visit]}>
+                  {this.props.Visit.Meta.Visit}
+                </a>
+              </h4>
+            </div>
+            <div>
+              <dl style={defliststyle}>
+                <div style={termstyle}>
+                  <dt>Cohort</dt>
+                  <dd>{this.props.Visit.Meta.Battery}</dd>
+                </div>
+                <div style={termstyle}>
+                  <dt>Site</dt>
+                  <dd>{this.props.Visit.Meta.Site}</dd>
+                </div>
+                {vdate}
+                {vage}
+                <div style={termstyle}>
+                  <dt>Status</dt>
+                  <dd>{vstatus}</dd>
+                </div>
+              </dl>
+              {instruments}
+            </div>
           </div>
         </div>
       </div>
diff --git a/modules/media/jsx/CandidateMediaWidget.js b/modules/media/jsx/CandidateMediaWidget.js
index 0d30531d839..9cfd45e01b3 100644
--- a/modules/media/jsx/CandidateMediaWidget.js
+++ b/modules/media/jsx/CandidateMediaWidget.js
@@ -13,7 +13,7 @@ function CandidateMediaWidget(props) {
   for (let i = 0; i < props.Files.length; i++) {
     const file = props.Files[i];
     files.push(
-      <a className="list-group-item" key={i}
+      <a className="list-group-item" style={{wordBreak: 'break-word'}} key={i}
         href={props.BaseURL
                     + '/media/files/'
                     + encodeURIComponent(file.Filename)}>

From fd85d4ea34da06a713f7778ab943ccb8fe78f7a5 Mon Sep 17 00:00:00 2001
From: Mario Martins <mario.andre.m@gmail.com>
Date: Mon, 3 Nov 2025 15:13:02 +0000
Subject: [PATCH 2/3] improved small screen viewing and added panel max height
 prop with default value

---
 jsx/{CSSGrid.js => CSSGrid/index.js} | 10 ++--------
 jsx/CSSGrid/styles.css               | 14 ++++++++++++++
 jsx/Panel.js                         |  5 ++++-
 webpack.config.ts                    |  2 +-
 4 files changed, 21 insertions(+), 10 deletions(-)
 rename jsx/{CSSGrid.js => CSSGrid/index.js} (94%)
 create mode 100644 jsx/CSSGrid/styles.css

diff --git a/jsx/CSSGrid.js b/jsx/CSSGrid/index.js
similarity index 94%
rename from jsx/CSSGrid.js
rename to jsx/CSSGrid/index.js
index b678901d60a..b56e1ad841c 100644
--- a/jsx/CSSGrid.js
+++ b/jsx/CSSGrid/index.js
@@ -1,6 +1,7 @@
 import Card from 'Card';
 import React, {useState, useEffect, useRef} from 'react';
 import PropTypes from 'prop-types';
+import './styles.css';
 
 /**
  * Create a three column grid of cards using a CSS grid.
@@ -51,13 +52,6 @@ function CSSGrid(props) {
     );
     setPanelHeights(heights);
   });
-  const grid = {
-    display: 'grid',
-    gridTemplateColumns: '33% 33% 33%',
-    gridAutoFlow: 'row dense',
-    gridRowGap: '1em',
-    rowGap: '1em',
-  };
 
   let orderedCards = [];
   for (let i = 0; i < props.Cards.length; i++) {
@@ -117,7 +111,7 @@ function CSSGrid(props) {
   });
 
   return (
-    <div ref={cardsRef} style={grid}>{cards}</div>
+    <div ref={cardsRef} className='CSSGrid'>{cards}</div>
   );
 }
 CSSGrid.propTypes = {
diff --git a/jsx/CSSGrid/styles.css b/jsx/CSSGrid/styles.css
new file mode 100644
index 00000000000..9d43f04267b
--- /dev/null
+++ b/jsx/CSSGrid/styles.css
@@ -0,0 +1,14 @@
+.CSSGrid {
+    display: grid; 
+    grid-template-columns: 33% 33% 33%;
+    grid-auto-flow: row dense; 
+    gap: 1rem;
+}
+
+@media (max-width: 576px) {
+    .CSSGrid {
+        display: flex;
+        flex-direction: column;
+        gap: 3rem;
+    }
+}
\ No newline at end of file
diff --git a/jsx/Panel.js b/jsx/Panel.js
index 0fca9987bba..f8efdad753b 100644
--- a/jsx/Panel.js
+++ b/jsx/Panel.js
@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import PropTypes from 'prop-types';
 import {useTranslation} from 'react-i18next';
+import { max } from 'd3';
 
 /**
  * Panel - a collapsible panel component with optional multiple views.
@@ -122,7 +123,7 @@ const Panel = (props) => {
    */
   return (
     <div className={`panel ${props.class}`}
-      style={{height: props.panelSize}}>
+      style={{height: props.panelSize, maxHeight: props.maxHeight}}>
       {panelHeading}
       <div id={props.id}
         className={props.collapsed ?
@@ -154,6 +155,7 @@ Panel.propTypes = {
   panelSize: PropTypes.string,
   style: PropTypes.object,
   children: PropTypes.node,
+  maxHeight: PropTypes.string,
 };
 Panel.defaultProps = {
   initCollapsed: false,
@@ -162,6 +164,7 @@ Panel.defaultProps = {
   height: '100%',
   class: 'panel-primary',
   collapsing: true,
+  maxHeight: '85vh',
 };
 
 export default Panel;
diff --git a/webpack.config.ts b/webpack.config.ts
index c4d5bfcb740..d9fb31089a5 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -351,7 +351,7 @@ configs.push({
     MultiSelectDropdown: './jsx/MultiSelectDropdown.js',
     Breadcrumbs: './jsx/Breadcrumbs.js',
     PolicyButton: './jsx/PolicyButton.js',
-    CSSGrid: './jsx/CSSGrid.js',
+    CSSGrid: './jsx/CSSGrid',
     Help: './jsx/Help.js',
     ...getModulesEntries(),
   },

From 0f4b1d2e2172e316efad3eabff50a3d76617039d Mon Sep 17 00:00:00 2001
From: Mario Martins <mario.andre.m@gmail.com>
Date: Mon, 3 Nov 2025 15:32:29 +0000
Subject: [PATCH 3/3] removed unused import

---
 jsx/Panel.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/jsx/Panel.js b/jsx/Panel.js
index f8efdad753b..7d0c0399604 100644
--- a/jsx/Panel.js
+++ b/jsx/Panel.js
@@ -1,7 +1,6 @@
 import React, {useEffect, useState} from 'react';
 import PropTypes from 'prop-types';
 import {useTranslation} from 'react-i18next';
-import { max } from 'd3';
 
 /**
  * Panel - a collapsible panel component with optional multiple views.