refactor(test-results-bar): improve resize handling and styling

Update resizing logic to enforce min and max height constraints for the
test results bar to enhance usability and prevent it from collapsing 
too small or expanding beyond the viewport.

Replace usage of htmlSafe on height strings with safer style handling 
and introduce a computed containerStyle property to centralize inline
style logic.

Adjust component classes to add rounded corners when expanded for a 
better visual appearance and simplify container width classes for 
clarity.

Author: rohitpaulk

app/components/course-page/test-results-bar/index.hbs

@@ -1,6 +1,6 @@
 <div
-  class="bg-gray-900 border-t border-gray-800 dark flex flex-col items-center"
-  style={{if this.isExpanded this.customHeight}}
+  class="bg-gray-900 border-t border-gray-800 dark flex flex-col items-center {{if this.isExpanded 'rounded-t-lg'}}"
+  style={{this.containerStyle}}
   data-test-test-results-bar
   ...attributes
 >
@@ -17,10 +17,7 @@
     </div>
   {{/if}}
 
-  <div
-    class="relative w-full max-w-(--breakpoint-lg) xl:max-w-(--breakpoint-xl) flex flex-col grow overflow-auto {{unless this.isExpanded 'h-0'}}"
-    data-test-contents
-  >
+  <div class="relative w-full flex flex-col grow overflow-auto {{unless this.isExpanded 'h-0'}}" data-test-contents>
     {{#if this.isExpanded}}
       <CoursePage::TestResultsBar::TopSection
         @onCollapseButtonClick={{this.handleCollapseButtonClick}}

app/components/course-page/test-results-bar/index.ts

@@ -24,7 +24,7 @@ export default class TestResultsBar extends Component<Signature> {
   @service declare coursePageState: CoursePageStateService;
   @service declare authenticator: AuthenticatorService;
   @tracked activeTabSlug = 'logs'; // 'logs' | 'autofix'
-  @tracked customHeight = htmlSafe('height: 75vh');
+  @tracked customHeight = '75vh';
 
   get availableTabSlugs() {
     if (this.args.activeStep.type === 'CourseStageStep') {
@@ -44,6 +44,14 @@ export default class TestResultsBar extends Component<Signature> {
     }
   }
 
+  get containerStyle() {
+    if (this.isExpanded) {
+      return htmlSafe(`height: ${this.customHeight}`);
+    } else {
+      return htmlSafe('height: auto');
+    }
+  }
+
   get isCollapsed() {
     return !this.isExpanded;
   }
@@ -65,14 +73,14 @@ export default class TestResultsBar extends Component<Signature> {
   @action
   handleMouseResize(event: MouseEvent) {
     const newHeight = window.innerHeight - event.clientY;
-    this.customHeight = htmlSafe(`height: min(100vh, ${newHeight}px)`);
+    this.customHeight = `max(250px, min(calc(100vh - 20px), ${newHeight}px))`;
   }
 
   @action
   handleTouchResize(event: TouchEvent) {
     const touch = event.touches[0] as Touch;
     const newHeight = window.innerHeight - touch.clientY;
-    this.customHeight = htmlSafe(`height: ${newHeight}px`);
+    this.customHeight = `max(250px, min(calc(100vh - 20px), ${newHeight}px))`;
   }
 
   @action