fix: hidden remove button (#1600)

This PR fixes the visibility of the "Remove" button for grade segments. Previously, the button would appear on hover above the segment. But the styling of the button blocked it from being visible. Now, the button appears on hover under the grade range. This change impacts Course Authors.
openedx · Jan 24, 2025 · 2102c7a · 2102c7a
1 parent 654c06b
commit 2102c7a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 19 deletions.
diff --git a/src/grading-settings/grading-scale/GradingScale.scss b/src/grading-settings/grading-scale/GradingScale.scss
@@ -6,7 +6,7 @@
 
   .grading-scale-segments-and-ticks {
     display: inline-block;
-    height: 3.125rem;
+    height: 3.5rem;
     width: 100%;
     border: 1px solid $black;
     overflow: hidden;
@@ -70,13 +70,9 @@
       }
 
       .grading-scale-segment-btn-remove {
-        font: normal $font-weight-normal .6875rem/1 $font-family-base;
+        font-size: x-small;
         display: none;
-        position: absolute;
-        top: -1.5625rem;
-        right: -.375rem;
-        padding: .375rem;
-        text-decoration: none;
+        margin: -2px -4px 0 0;
       }
 
       .grading-scale-segment-content {

diff --git a/src/grading-settings/grading-scale/components/GradingScaleSegment.tsx b/src/grading-settings/grading-scale/components/GradingScaleSegment.tsx
@@ -66,19 +66,19 @@ const GradingScaleSegment = ({
         <span data-testid="grading-scale-segment-number" className="grading-scale-segment-content-number m-0">
           {gradingSegments[idx === 0 ? 0 : idx - 1]?.previous} - {value === 100 ? value : value - 1}
         </span>
+        {idx !== gradingSegments.length && idx - 1 !== 0 && (
+          <Button
+            variant="link"
+            size="inline"
+            className="grading-scale-segment-btn-remove"
+            data-testid="grading-scale-btn-remove"
+            type="button"
+            onClick={() => removeGradingSegment(idx)}
+          >
+            {intl.formatMessage(messages.removeSegmentButtonText)}
+          </Button>
+        )}
       </div>
-      {idx !== gradingSegments.length && idx - 1 !== 0 && (
-        <Button
-          variant="link"
-          size="inline"
-          className="grading-scale-segment-btn-remove"
-          data-testid="grading-scale-btn-remove"
-          type="button"
-          onClick={() => removeGradingSegment(idx)}
-        >
-          {intl.formatMessage(messages.removeSegmentButtonText)}
-        </Button>
-      )}
     </div>
   );
 };