Move hints inside question box for accordionless questions

Author: jacbn

src/app/components/content/IsaacQuestion.tsx

@@ -284,9 +284,7 @@ export const IsaacQuestion = withRouter(({doc, location}: {doc: ApiTypes.Questio
                 }
             </div>
             {/* Physics Hints */}
-            {isPhy && <div>
-                <IsaacTabbedHints questionPartId={doc.id as string} hints={doc.hints} />
-            </div>}
+            {isPhy && <IsaacTabbedHints questionPartId={doc.id as string} hints={doc.hints} />}
         </Form>
 
         {/* LLM free-text question validation response */}

src/scss/common/questions.scss

@@ -24,7 +24,7 @@ $cloze-scrollbar-height: 4px;
   min-width: auto;
 }
 
-.question-component {
+form:has(> .question-component) {
   margin-bottom: 2rem;
   clear: both;
 
@@ -70,6 +70,12 @@ $cloze-scrollbar-height: 4px;
   }
 }
 
+.question-component {
+  background-color: white;
+  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.08);
+  padding: 1rem;
+}
+
 $inline-feedback-size: 20px;
 $inline-feedback-padding: 2px;
 
@@ -395,13 +401,6 @@ $inline-feedback-padding: 2px;
   }
 }
 
-// NOMENSA question.scss
-.question-component {
-  background-color: white;
-  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.08);
-  padding: 1rem;
-}
-
 .cloze-question {
   // This is a work around, allowing KaTeX to be used for cloze questions.
   //  There is no guarantee that it works all of the time, so needs to be

src/scss/phy/questions.scss

@@ -125,26 +125,35 @@
 }
 
 // styling for question components outside an accordion
-.question-component {
+form:has(> .question-component) {
   border: 2px solid var(--nav-primary);
   padding: 0;
   border-radius: 8px;
   margin-bottom: 1rem;
 
-  > div:first-child {
+  > .question-component > div:first-child {
     padding: 2rem 2rem 0.5rem;
 
     &:last-child {
       padding-bottom: 3rem;
     }
   }
+
+  > .tabbed-hints {
+    padding: 0 2rem;
+  }
 }
 
 // any such styling that should not be present in an accordion
-.isaac-accordion .question-component {
+.isaac-accordion form:has(> .question-component) {
   border: unset;
   // padding is overridden above
   border-radius: unset;
+
+  > .tabbed-hints {
+    padding: 0;
+  }
+  
 }
 
 .content-metadata-container {