@striae-org/striae 4.0.3 → 4.2.0

package/app/components/auth/mfa-enrollment.module.css

@@ -10,6 +10,7 @@
   justify-content: center;
   z-index: 1000;
   padding: 1rem;
+  cursor: default;
 }
 
 .modal {
@@ -21,6 +22,7 @@
   max-height: 90vh;
   overflow-y: auto;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  cursor: default;
 }
 
 .header {
@@ -149,7 +151,8 @@
 }
 
 .errorMessage {
-  background: linear-gradient(135deg, 
+  background: linear-gradient(
+    135deg,
     color-mix(in lab, var(--error) 12%, transparent),
     color-mix(in lab, var(--error) 8%, transparent)
   );
@@ -169,13 +172,17 @@
 }
 
 .errorMessage::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
-  background: linear-gradient(90deg, var(--error), color-mix(in lab, var(--error) 60%, transparent));
+  background: linear-gradient(
+    90deg,
+    var(--error),
+    color-mix(in lab, var(--error) 60%, transparent)
+  );
   animation: shimmer 2s ease-in-out infinite;
 }
 
@@ -246,7 +253,8 @@
 }
 
 @keyframes shimmer {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 0.6;
     transform: translateX(-100%);
   }
@@ -261,7 +269,7 @@
   .errorMessage {
     animation: none;
   }
-  
+
   .errorMessage::before {
     animation: none;
   }

package/app/components/auth/mfa-verification.module.css

@@ -9,6 +9,7 @@
   justify-content: center;
   align-items: center;
   z-index: 1000;
+  cursor: default;
 }
 
 .modal {
@@ -18,6 +19,7 @@
   width: 100%;
   max-width: 400px;
   box-shadow: 0 var(--spaceM) var(--spaceXL) rgba(0, 0, 0, 0.2);
+  cursor: default;
 }
 
 .title {
@@ -63,7 +65,8 @@
 }
 
 .errorMessage {
-  background: linear-gradient(135deg, 
+  background: linear-gradient(
+    135deg,
     color-mix(in lab, var(--error) 12%, transparent),
     color-mix(in lab, var(--error) 8%, transparent)
   );
@@ -83,13 +86,17 @@
 }
 
 .errorMessage::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
-  background: linear-gradient(90deg, var(--error), color-mix(in lab, var(--error) 60%, transparent));
+  background: linear-gradient(
+    90deg,
+    var(--error),
+    color-mix(in lab, var(--error) 60%, transparent)
+  );
   animation: shimmer 2s ease-in-out infinite;
 }
 
@@ -229,7 +236,8 @@
 }
 
 @keyframes shimmer {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 0.6;
     transform: translateX(-100%);
   }
@@ -244,7 +252,7 @@
   .errorMessage {
     animation: none;
   }
-  
+
   .errorMessage::before {
     animation: none;
   }

package/app/components/canvas/box-annotations/box-annotations.module.css

@@ -59,16 +59,17 @@
 
 .annotationLabel {
   position: absolute;
-  bottom: -25px;
+  bottom: -30px;
   left: 0;
   background: rgba(0, 0, 0, 0.8);
   color: white;
-  padding: 2px 6px;
-  font-size: 12px;
-  border-radius: 3px;
+  padding: 4px 10px;
+  font-size: 13px;
+  line-height: 1.3;
+  border-radius: 4px;
   white-space: nowrap;
   pointer-events: none;
-  max-width: 200px;
+  max-width: 260px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -82,33 +83,33 @@
   background: white;
   border: 1px solid #ccc;
   border-radius: 6px;
-  padding: 12px;
+  padding: 16px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  min-width: 200px;
+  min-width: 250px;
 }
 
 .labelDialogTitle {
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 600;
-  margin-bottom: 6px;
+  margin-bottom: 8px;
   color: #333;
 }
 
 .labelDialogNote {
-  font-size: 12px;
+  font-size: 13px;
   color: #666;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
   font-style: italic;
-  line-height: 1.3;
+  line-height: 1.4;
 }
 
 .labelInput {
   width: 100%;
-  padding: 6px 8px;
+  padding: 8px 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
   font-size: 14px;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
   box-sizing: border-box;
 }
 
@@ -120,18 +121,21 @@
 
 .labelDialogButtons {
   display: flex;
-  gap: 8px;
+  gap: 10px;
   justify-content: flex-end;
+  margin-top: 8px;
 }
 
 .labelConfirmButton,
 .labelCancelButton {
-  padding: 6px 12px;
+  padding: 10px 18px;
   border: none;
   border-radius: 4px;
-  font-size: 12px;
+  font-size: 14px;
+  font-weight: 500;
   cursor: pointer;
   transition: background-color 0.2s ease;
+  min-width: 88px;
 }
 
 .labelConfirmButton {
@@ -167,4 +171,4 @@
 
 .readOnlyAnnotation:hover::after {
   display: none !important; /* Hide the delete button for read-only annotations */
-}
+}

package/app/components/canvas/box-annotations/box-annotations.tsx

@@ -89,6 +89,7 @@ export const BoxAnnotations = ({
 
   // Ref to track if component is mounted to prevent state updates after unmount
   const isMountedRef = useRef(true);
+  const labelInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     return () => {
@@ -96,6 +97,19 @@ export const BoxAnnotations = ({
     };
   }, []);
 
+  useEffect(() => {
+    if (!labelDialog.isVisible) return;
+
+    const focusFrame = window.requestAnimationFrame(() => {
+      labelInputRef.current?.focus();
+      labelInputRef.current?.select();
+    });
+
+    return () => {
+      window.cancelAnimationFrame(focusFrame);
+    };
+  }, [labelDialog.isVisible]);
+
   // Memoized function to get relative coordinates (more stable reference)
   const getRelativeCoordinates = useCallback((e: React.MouseEvent): { x: number; y: number } => {
     const imageElement = imageRef.current;
@@ -602,6 +616,7 @@ export const BoxAnnotations = ({
             }
           </div>
           <input
+            ref={labelInputRef}
             type="text"
             value={labelDialog.label}
             onChange={handleLabelChange}

package/app/components/canvas/canvas.module.css

@@ -12,12 +12,21 @@
 }
 
 .imageContainer {
-  position: relative;
+  flex: 1;
+  min-width: 0;
   display: flex;
   justify-content: center;
   align-items: center;
+  overflow: visible;
+}
+
+/* Tight wrapper sized to the rendered image — all overlays position relative to this */
+.imageWrapper {
+  position: relative;
+  display: inline-block;
+  line-height: 0;
   max-width: 100%;
-  max-height: 100%;
+  max-height: 80vh;
 }
 
 .toolbarWrapper {
@@ -34,7 +43,7 @@
   top: 1rem;
   z-index: 15;
   color: #e0e0e0;
-  font-family: 'Inter', sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 1rem;
   font-weight: 500;
   pointer-events: none;
@@ -47,7 +56,7 @@
 
 .confirmationIncluded {
   font-size: 0.8rem;
-  color: #FFDE21;
+  color: #ffde21;
 }
 
 .confirmationConfirmed {
@@ -103,31 +112,15 @@
   box-shadow: 0 2px 6px rgba(0, 123, 255, 0.4);
 }
 
-/* Company Display */
-.companyDisplay {
-  position: absolute;
-  right: 2rem;
-  top: 1rem;
-  z-index: 15;
-  color: #e0e0e0;
-  font-family: 'Inter', sans-serif;
-  font-size: 1.5rem;
-  font-weight: 500;
-  pointer-events: none;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: calc(100vw - 16rem);
-}
-
 .image {
+  display: block;
   max-width: 100%;
   max-height: 80vh;
   object-fit: contain;
 }
 
-.placeholder, .loading {
+.placeholder,
+.loading {
   color: #e0e0e0;
   font-size: 1.1rem;
   text-align: center;
@@ -155,7 +148,7 @@
 .leftAnnotation,
 .rightAnnotation {
   position: absolute;
-  padding: 0.75rem 1rem;
+  padding: 1rem 1.4rem;
   background: rgba(0, 0, 0, 0.7);
   border-radius: 6px;
   backdrop-filter: blur(4px);
@@ -177,7 +170,7 @@
   position: absolute;
   bottom: 1rem;
   left: 1rem;
-  padding: 0.75rem 1rem;
+  padding: 1rem 1.4rem;
   background: rgba(0, 0, 0, 0.7);
   border-radius: 6px;
   backdrop-filter: blur(4px);
@@ -186,7 +179,7 @@
 }
 
 .caseText {
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
   font-size: 1.1rem;
   font-weight: 700;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
@@ -197,7 +190,7 @@
 /* Class Characteristics Display */
 .classCharacteristics {
   position: absolute;
-  top: -3rem;
+  bottom: calc(100% + 0.5rem);
   left: 50%;
   transform: translateX(-50%);
   z-index: 15;
@@ -205,14 +198,14 @@
 }
 
 .classText {
-  padding: 0.75rem 1.5rem;
+  padding: 1rem 2rem;
   background: rgba(0, 0, 0, 0.8);
   color: #ffffff;
   border-radius: 8px;
   backdrop-filter: blur(6px);
   border: 2px solid rgba(255, 255, 255, 0.2);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-  font-family: 'Inter', sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 1.1rem;
   font-weight: 600;
   text-align: center;
@@ -237,7 +230,7 @@
   backdrop-filter: blur(6px);
   border: 2px solid rgba(255, 255, 255, 0.2);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-  font-family: 'Inter', sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 1.1rem;
   font-weight: 700;
   text-align: center;
@@ -249,8 +242,8 @@
 /* Subclass Warning Display */
 .subclassWarning {
   position: absolute;
-  bottom: 1rem; 
-  right: 2rem; 
+  bottom: 1rem;
+  right: 2rem;
   z-index: 20;
   pointer-events: none;
 }
@@ -263,7 +256,7 @@
   backdrop-filter: blur(6px);
   border: 2px solid rgba(255, 255, 255, 0.3);
   box-shadow: 0 4px 16px rgba(220, 53, 69, 0.4);
-  font-family: 'Inter', sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 1rem;
   font-weight: 700;
   text-align: center;
@@ -282,33 +275,50 @@
 /* Image and Notes Container */
 .imageAndNotesContainer {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  max-width: 100%;
-  max-height: 100%;
+  flex-direction: row;
+  align-items: stretch;
+  align-self: stretch;
+  width: 100%;
 }
 
-/* Additional Notes Display */
-.additionalNotesContainer {
+/* Notes Panel - fixed-width right-side column */
+.notesPanel {
+  width: 260px;
+  flex-shrink: 0;
+  /* Opt out of stretch so the explicit height takes effect, stopping the panel
+     before the Subclass badge (bottom:1rem, ~2.5rem tall = 3.5rem from canvas bottom).
+     calc(100% - 4rem) lands ~4rem from the canvas bottom, clearing the badge. */
+  align-self: flex-start;
+  height: calc(100% - 4rem);
   display: flex;
-  justify-content: center;
-  width: 100%;
-  max-width: 600px;
+  flex-direction: column;
+  background: rgba(20, 20, 20, 0.55);
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+}
+
+.notesPanelHeader {
+  padding: 0.625rem 1rem;
+  color: #adb5bd;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  flex-shrink: 0;
+  font-family: "Inter", sans-serif;
 }
 
 .additionalNotesBox {
-  background: #ffffff;
-  color: #000000;
-  padding: 1rem 1.5rem;
-  border-radius: 8px;
-  border: 2px solid #d0d0d0;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  font-family: 'Inter', sans-serif;
-  font-size: 0.95rem;
-  line-height: 1.4;
+  flex: 1;
+  overflow-y: auto;
+  background: transparent;
+  color: #e0e0e0;
+  padding: 1rem;
+  font-family: "Inter", sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.5;
   text-align: left;
   white-space: pre-wrap;
   word-wrap: break-word;
-  max-width: 100%;
-}
+}

package/app/components/canvas/canvas.tsx

@@ -10,6 +10,7 @@ interface CanvasProps {
   imageUrl?: string;
   filename?: string;
   company?: string;
+  badgeId?: string;
   firstName?: string;
   error?: string;
   activeAnnotations?: Set<string>;
@@ -18,6 +19,7 @@ interface CanvasProps {
   isBoxAnnotationMode?: boolean;
   boxAnnotationColor?: string;
   isReadOnly?: boolean;
+  isArchivedCase?: boolean;
   // Confirmation data for storing case-level confirmations
   caseNumber: string; // Required for audit logging
   currentImageId?: string;
@@ -31,7 +33,8 @@ type ImageLoadError = {
 export const Canvas = ({ 
   imageUrl, 
   filename, 
-  company, 
+  company,
+  badgeId,
   firstName, 
   error, 
   activeAnnotations, 
@@ -40,6 +43,7 @@ export const Canvas = ({
   isBoxAnnotationMode = false,
   boxAnnotationColor = '#FF0000',
   isReadOnly = false,
+  isArchivedCase = false,
   caseNumber,
   currentImageId
 }: CanvasProps) => {
@@ -274,7 +278,7 @@ export const Canvas = ({
                   <div className={styles.confirmationIncluded}>
                     {isReadOnly ? 'Confirmation Requested' : 'Confirmation Field Included'}
                   </div>
-                  {isReadOnly && (
+                  {isReadOnly && !isArchivedCase && (
                     <button 
                       className={styles.confirmButton}
                       onClick={() => setIsConfirmationModalOpen(true)}
@@ -289,13 +293,6 @@ export const Canvas = ({
         </div>
       )}
       
-      {/* Company Display - Upper Right */}
-      {company && (
-        <div className={styles.companyDisplay}>
-          {isReadOnly ? 'CASE REVIEW ONLY' : company}
-        </div>
-      )}
-      
       {(loadError || error) ? (
         <p className={styles.error}>{getErrorMessage()}</p>
       ) : isLoading ? (
@@ -303,6 +300,7 @@ export const Canvas = ({
       ) : imageUrl && imageUrl !== '/clear.jpg' ? (
         <div className={styles.imageAndNotesContainer}>
           <div className={styles.imageContainer}>
+            <div className={styles.imageWrapper}>
             {/* Class Characteristics - Above Image */}
             {activeAnnotations?.has('class') && annotationData && (annotationData.customClass || annotationData.classType) && (
               <div className={styles.classCharacteristics}>
@@ -331,7 +329,7 @@ export const Canvas = ({
             draggable={false}
           />
           
-          {/* Box Annotations Component - Show when box tool is active for visibility */}
+          {/* Box Annotations Component - contained within imageWrapper */}
           {activeAnnotations?.has('box') && (
             <BoxAnnotations
               imageRef={imageRef}
@@ -348,7 +346,7 @@ export const Canvas = ({
             />
           )}
           
-          {/* Annotations Overlay */}
+          {/* Annotations Overlay - contained within imageWrapper */}
           {activeAnnotations?.has('number') && annotationData && (
             <div className={styles.annotationsOverlay}>
               {/* Left side case and item numbers */}
@@ -383,7 +381,7 @@ export const Canvas = ({
             </div>
           )}
           
-          {/* Index Number Overlay */}
+          {/* Index Number Overlay - contained within imageWrapper */}
           {activeAnnotations?.has('index') && annotationData?.indexType === 'number' && annotationData?.indexNumber && (
             <div className={styles.annotationsOverlay}>
               <div 
@@ -400,15 +398,17 @@ export const Canvas = ({
               </div>
             </div>
           )}
-        </div>
+            </div>{/* end imageWrapper */}
+        </div>{/* end imageContainer */}
         
-        {/* Additional Notes - Below Image */}
+        {/* Additional Notes - Right Panel */}
         {activeAnnotations?.has('notes') && annotationData?.additionalNotes && (
-          <div className={styles.additionalNotesContainer}>
+          <aside className={styles.notesPanel} aria-label="Additional notes">
+            <div className={styles.notesPanelHeader}>Notes</div>
             <div className={styles.additionalNotesBox}>
               {annotationData.additionalNotes}
             </div>
-          </div>
+          </aside>
         )}
         </div>
       ) : (
@@ -453,6 +453,7 @@ export const Canvas = ({
         onClose={() => setIsConfirmationModalOpen(false)}
         onConfirm={handleConfirmation}
         company={company}
+        defaultBadgeId={badgeId}
         existingConfirmation={annotationData?.confirmationData || null}
       />
     </div>    

package/app/components/canvas/confirmation/confirmation.module.css

@@ -11,6 +11,7 @@
 }
 
 .modal {
+  position: relative;
   background: var(--backgroundLight);
   border-radius: var(--spaceXS);
   width: 90%;