Move issue history into sidebar modal

frontend/app/ops-redesign.css

@@ -2557,9 +2557,162 @@ button:disabled,
 
 /* Guided issue reporting */
 .issue-portal-page {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(310px, 360px);
+  align-items: start;
   gap: 20px;
 }
 
+.issue-portal-page > .issue-portal-hero,
+.issue-portal-page > .error-banner,
+.issue-portal-page > .status-banner {
+  grid-column: 1 / -1;
+}
+
+.issue-portal-page > .issue-flow {
+  grid-column: 1;
+}
+
+.issue-portal-page > .issue-reports-column {
+  grid-column: 2;
+}
+
+.portal-lower-content {
+  display: contents;
+}
+
+.issue-reports-column {
+  position: sticky;
+  top: 16px;
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 10px;
+  min-width: 0;
+  height: calc(100vh - 32px);
+  overflow: hidden;
+}
+
+.issue-reports-column > .issue-history-heading {
+  align-items: center;
+  padding: 14px 15px;
+  border: 1px solid var(--ops-line);
+  border-radius: var(--ops-radius-lg);
+  background: rgba(255, 255, 255, 0.018);
+}
+
+.issue-reports-column > .issue-history-heading h2 {
+  font-size: 1rem;
+}
+
+.issue-reports-column > .portal-toolbar {
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  padding: 12px;
+}
+
+.issue-reports-column > .portal-toolbar .portal-mine-toggle {
+  align-self: end;
+  margin: 0 0 10px;
+  white-space: nowrap;
+}
+
+.issue-reports-column > .portal-workspace {
+  display: block;
+  min-width: 0;
+  min-height: 0;
+}
+
+.issue-portal-page .portal-list-panel {
+  height: 100%;
+  max-height: none;
+  padding: 13px;
+  overflow: hidden;
+}
+
+.issue-portal-page .portal-list-panel > .user-directory-panel-header {
+  display: none;
+}
+
+.issue-portal-page .portal-item-list {
+  gap: 8px;
+  max-height: 100%;
+  padding-right: 4px;
+}
+
+.issue-portal-page .portal-item-row {
+  padding: 11px;
+}
+
+.issue-portal-page .portal-item-row p {
+  display: -webkit-box;
+  margin: 6px 0;
+  overflow: hidden;
+  font-size: 0.7rem;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.issue-portal-page .portal-item-row-meta {
+  gap: 5px 9px;
+  font-size: 0.62rem;
+}
+
+.issue-modal-backdrop {
+  position: fixed;
+  z-index: 998;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: rgba(2, 6, 18, 0.76);
+  backdrop-filter: blur(5px);
+  cursor: default;
+}
+
+.issue-detail-modal {
+  display: none;
+}
+
+.issue-detail-modal.is-open {
+  position: fixed;
+  z-index: 999;
+  inset: 5vh max(18px, calc((100vw - 1120px) / 2));
+  display: grid;
+  align-content: start;
+  max-height: 90vh;
+  padding: 0 20px 22px;
+  overflow: auto;
+  border-color: rgba(126, 215, 255, 0.36);
+  background: var(--ops-panel);
+  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
+}
+
+.issue-modal-toolbar {
+  position: sticky;
+  z-index: 2;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  margin: 0 -20px 4px;
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--ops-line);
+  background: rgba(13, 21, 39, 0.97);
+  backdrop-filter: blur(14px);
+}
+
+.issue-modal-toolbar > div {
+  display: grid;
+  gap: 2px;
+}
+
+.issue-modal-toolbar strong {
+  font-size: 0.86rem;
+}
+
 .issue-portal-page > .issue-portal-hero {
   display: flex;
   align-items: center;
@@ -3379,7 +3532,37 @@ button:disabled,
   overflow: hidden;
   white-space: pre-wrap;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
+  -webkit-line-clamp: 2;
+}
+
+@media (max-width: 1100px) {
+  .issue-portal-page {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .issue-portal-page > .issue-portal-hero,
+  .issue-portal-page > .error-banner,
+  .issue-portal-page > .status-banner,
+  .issue-portal-page > .issue-flow,
+  .issue-portal-page > .issue-reports-column {
+    grid-column: 1;
+    grid-row: auto;
+  }
+
+  .issue-reports-column {
+    position: static;
+    height: auto;
+    overflow: visible;
+  }
+
+  .issue-portal-page .portal-list-panel {
+    position: static;
+    max-height: none;
+  }
+
+  .issue-portal-page .portal-item-list {
+    max-height: 440px;
+  }
 }
 
 @media (max-width: 980px) {
@@ -3413,4 +3596,16 @@ button:disabled,
   .issue-linked-request { align-items: stretch; flex-direction: column; }
   .issue-file-list > label { grid-template-columns: auto minmax(0, 1fr); }
   .issue-file-list > label > b { grid-column: 2; }
+  .issue-detail-modal.is-open {
+    inset: 10px;
+    max-height: calc(100vh - 20px);
+    padding-right: 13px;
+    padding-left: 13px;
+  }
+  .issue-modal-toolbar {
+    margin-right: -13px;
+    margin-left: -13px;
+    padding-right: 13px;
+    padding-left: 13px;
+  }
 }

frontend/app/portal/PortalClient.tsx

@@ -594,7 +594,7 @@ export default function PortalClient({ workspace }: PortalClientProps) {
       const preferred = options?.preferItemId ?? selectedItemId ?? preselectedItemId
       if (preferred && loadedItems.some((item) => item.id === preferred)) {
         setSelectedItemId(preferred)
-      } else if (loadedItems.length > 0) {
+      } else if (loadedItems.length > 0 && workspace === 'request') {
         setSelectedItemId(loadedItems[0].id)
       } else {
         setSelectedItemId(null)
@@ -1321,6 +1321,29 @@ export default function PortalClient({ workspace }: PortalClientProps) {
     }
   }
 
+  const closeIssueModal = () => {
+    setSelectedItemId(null)
+    setSelectedItem(null)
+    setComments([])
+    setActivity([])
+    setCommentText('')
+  }
+
+  useEffect(() => {
+    if (workspace !== 'issue' || selectedItemId == null) return
+    const previousOverflow = document.body.style.overflow
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') closeIssueModal()
+    }
+    document.body.style.overflow = 'hidden'
+    window.addEventListener('keydown', closeOnEscape)
+    return () => {
+      document.body.style.overflow = previousOverflow
+      window.removeEventListener('keydown', closeOnEscape)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [workspace, selectedItemId])
+
   if (loadingItems && !items.length) {
     return <main className="card">Loading {workspace === 'issue' ? 'issues' : 'requests'}...</main>
   }
@@ -1898,6 +1921,7 @@ export default function PortalClient({ workspace }: PortalClientProps) {
         </>
       ) : null}
 
+      <div className={workspace === 'issue' ? 'issue-reports-column' : 'portal-lower-content'}>
       {workspace === 'issue' ? (
         <div className="issue-history-heading">
           <div>
@@ -1920,18 +1944,16 @@ export default function PortalClient({ workspace }: PortalClientProps) {
             ))}
           </select>
         </label>
+        {workspace === 'request' ? (
           <label className="portal-search-filter">
             <span>Search</span>
             <input
               value={filterSearch}
               onChange={(event) => setFilterSearch(event.target.value)}
-            placeholder={
+              placeholder="Search request items by title, description, or id"
-              workspace === 'request'
-                ? 'Search request items by title, description, or id'
-                : 'Search issue items by title, description, or id'
-            }
             />
           </label>
+        ) : null}
         <label className="inline-checkbox portal-mine-toggle">
           <input
             type="checkbox"
@@ -1985,7 +2007,7 @@ export default function PortalClient({ workspace }: PortalClientProps) {
                           ? item.workflow?.stage_label ?? item.status
                           : formatIssueStatus(item.status)}
                       </span>
-                      <span>By: {item.created_by_username}</span>
+                      {isAdmin ? <span>By: {item.created_by_username}</span> : null}
                       <span>Updated: {formatDate(item.last_activity_at)}</span>
                     </div>
                   </div>
@@ -1995,7 +2017,33 @@ export default function PortalClient({ workspace }: PortalClientProps) {
           )}
         </section>
 
-        <section className="admin-panel portal-detail-panel">
+        {workspace === 'issue' && selectedItemId != null ? (
+          <button
+            type="button"
+            className="issue-modal-backdrop"
+            aria-label="Close issue details"
+            onClick={closeIssueModal}
+          />
+        ) : null}
+
+        <section
+          className={`admin-panel portal-detail-panel ${workspace === 'issue' ? `issue-detail-modal ${selectedItemId != null ? 'is-open' : ''}` : ''}`}
+          role={workspace === 'issue' ? 'dialog' : 'region'}
+          aria-labelledby={workspace === 'issue' ? 'issue-detail-title' : undefined}
+        >
+          {workspace === 'issue' && selectedItemId != null ? (
+            <div className="issue-modal-toolbar">
+              <div>
+                <span className="section-kicker">Reported problem</span>
+                <strong id="issue-detail-title">
+                  {selectedItem ? `Issue #${selectedItem.id}` : 'Issue details'}
+                </strong>
+              </div>
+              <button type="button" className="ghost-button" onClick={closeIssueModal}>
+                Close
+              </button>
+            </div>
+          ) : null}
           {!selectedItemId ? (
             <div className="status-banner">
               Select a {workspaceLabel} to view details.
@@ -2295,6 +2343,7 @@ export default function PortalClient({ workspace }: PortalClientProps) {
           )}
         </section>
       </div>
+      </div>
     </main>
   )
 }