feat: outline and align right the total label

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.jsx

@@ -11,6 +11,8 @@ import CollapsibleFormWidget from '../CollapsibleFormWidget';
 import hooks from './hooks';
 import messages from '../messages';
 
+import './index.scss';
+
 /**
  * Collapsible Form widget controlling video start and end times
  * Also displays the total run time of the video.
@@ -69,12 +71,14 @@ export const DurationWidget = ({
           </Form.Control.Feedback>
         </Form.Group>
       </Form.Row>
-      <div className="mt-4">
-        {getTotalLabel({
-          durationString: duration,
-          subtitle: false,
-          intl,
-        })}
+      <div className="mt-4 mx-2 text-right">
+        <span className="p-2 total-label rounded">
+          {getTotalLabel({
+            durationString: duration,
+            subtitle: false,
+            intl,
+          })}
+        </span>
       </div>
     </CollapsibleFormWidget>
   );

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.scss

@@ -0,0 +1,5 @@
+@import "@edx/paragon/scss/core/core";
+
+.total-label {
+    border: 1px solid $gray-500;
+}