From 8e3243666f40c3fd492cac7e8166c20d2714c9bf Mon Sep 17 00:00:00 2001
From: Thomas Sparks <69657545+thsparks@users.noreply.github.com>
Date: Thu, 12 Sep 2024 17:13:01 -0700
Subject: [PATCH] Teacher Tool: Assorted Small UI Fixes (#10180)

This change makes a few small UI fixes:
Fixes width of criteria on firefox (webkit not supported)
Remove "Max" and display a permanent check instead when the user reaches the max allowed count for a criteria.
Fix line wrapping for criteria
---
 teachertool/src/components/CatalogOverlay.tsx         | 10 ++++++----
 .../styling/CriteriaInstanceDisplay.module.scss       |  4 +++-
 .../components/styling/EvalResultDisplay.module.scss  | 11 +++++++----
 teachertool/src/constants.ts                          |  2 +-
 teachertool/src/services/backendRequests.ts           |  1 -
 5 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/teachertool/src/components/CatalogOverlay.tsx b/teachertool/src/components/CatalogOverlay.tsx
index ebd5ddf8af15..ecd99ea0ff92 100644
--- a/teachertool/src/components/CatalogOverlay.tsx
+++ b/teachertool/src/components/CatalogOverlay.tsx
@@ -40,26 +40,28 @@ interface CatalogItemLabelProps {
     recentlyAdded: boolean;
 }
 const CatalogItemLabel: React.FC<CatalogItemLabelProps> = ({ catalogCriteria, isMaxed, recentlyAdded }) => {
-    const showRecentlyAddedIndicator = recentlyAdded && !isMaxed;
     return (
         <div className={css["catalog-item-label"]}>
             <div className={css["action-indicators"]}>
                 {isMaxed ? (
-                    <span>{Strings.Max}</span>
+                    <i
+                        className="fas fa-check"
+                        title={Strings.MaxReached}
+                    />
                 ) : (
                     <>
                         <i
                             className={classList(
                                 "fas fa-check",
                                 css["recently-added-indicator"],
-                                showRecentlyAddedIndicator ? undefined : css["hide-indicator"]
+                                recentlyAdded ? undefined : css["hide-indicator"]
                             )}
                             title={lf("Added!")}
                         />
                         <i
                             className={classList(
                                 "fas fa-plus",
-                                showRecentlyAddedIndicator ? css["hide-indicator"] : undefined
+                                recentlyAdded ? css["hide-indicator"] : undefined
                             )}
                             title={Strings.AddToChecklist}
                         />
diff --git a/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss b/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss
index 33d69c603588..342f6d81b962 100644
--- a/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss
+++ b/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss
@@ -28,6 +28,7 @@
 
     .segment-container {
         display: flex;
+        flex-wrap: wrap;
         flex-direction: row;
         align-items: flex-start;
         justify-content: flex-start;
@@ -158,7 +159,8 @@
     .criteria-description {
         color: var(--pxt-page-foreground-light);
         margin-top: 0.2rem;
-        width: -webkit-fill-available;
+        width: 100%; // For non-webkit browsers
+        width: -webkit-fill-available; // Webkit browsers
 
         &.for-print {
             font-style: italic;
diff --git a/teachertool/src/components/styling/EvalResultDisplay.module.scss b/teachertool/src/components/styling/EvalResultDisplay.module.scss
index d10805a8f03b..f3227fad8a29 100644
--- a/teachertool/src/components/styling/EvalResultDisplay.module.scss
+++ b/teachertool/src/components/styling/EvalResultDisplay.module.scss
@@ -80,7 +80,8 @@
     gap: 0.5rem;
     align-items: center;
     justify-content: flex-start;
-    width: -webkit-fill-available;
+    width: 100%; // For non-webkit browsers
+    width: -webkit-fill-available; // Webkit browsers
     padding: 0.5rem;
 }
 
@@ -89,7 +90,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
-    width: -webkit-fill-available;
+    width: 100%; // For non-webkit browsers
+    width: -webkit-fill-available; // Webkit browsers
     min-height: 9rem;
     gap: 0.5rem;
 
@@ -163,7 +165,8 @@
 .separator {
     border-bottom: solid 1px var(--pxt-content-accent);
     margin-top: 0.5rem;
-    width: -webkit-fill-available;
+    width: 100%; // For non-webkit browsers
+    width: -webkit-fill-available; // Webkit browsers
 }
 
 .result-details {
@@ -302,4 +305,4 @@
     display: flex;
     flex-direction: column;
     margin-top: 0.5rem;
-}
\ No newline at end of file
+}
diff --git a/teachertool/src/constants.ts b/teachertool/src/constants.ts
index 3e8155896e94..ee07e962d639 100644
--- a/teachertool/src/constants.ts
+++ b/teachertool/src/constants.ts
@@ -32,7 +32,6 @@ export namespace Strings {
     export const Continue = lf("Continue");
     export const Loading = lf("Loading...");
     export const Close = lf("Close");
-    export const Max = lf("Max");
     export const AddToChecklist = lf("Add to Checklist");
     export const SelectCriteriaDescription = lf("Select the criteria you'd like to include");
     export const Checklist = lf("Checklist");
@@ -53,6 +52,7 @@ export namespace Strings {
     export const EvaluationComplete = lf("Evaluation complete");
     export const UnableToEvaluatePartial = lf("Unable to evaluate some criteria");
     export const GiveFeedback = lf("Give Feedback");
+    export const MaxReached = lf("Maximum count reached for this item");
 }
 
 export namespace Ticks {
diff --git a/teachertool/src/services/backendRequests.ts b/teachertool/src/services/backendRequests.ts
index a153bb8e2ed9..31c3991c3a4b 100644
--- a/teachertool/src/services/backendRequests.ts
+++ b/teachertool/src/services/backendRequests.ts
@@ -1,4 +1,3 @@
-import { Strings } from "../constants";
 import { stateAndDispatch } from "../state";
 import { ErrorCode } from "../types/errorCode";
 import { logError } from "./loggingService";