Merge pull request instructlab#744 from jeff-phillips-18/fixes

Fix typo in Experimental features nav item and q&a text overwrite

Author: vishnoianil

src/components/AppLayout.tsx

@@ -108,7 +108,7 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children, className })
     },
     isExperimentalEnabled && {
       path: '/experimental',
-      label: 'Experimental fFeatures',
+      label: 'Experimental features',
       children: [
         { path: '/experimental/fine-tune/', label: 'Fine-tuning' },
         { path: '/experimental/chat-eval/', label: 'Model chat eval' }

src/components/Contribute/Knowledge/KnowledgeSeedExamples/KnowledgeQuestionAnswerPair.tsx

@@ -46,6 +46,7 @@ const KnowledgeQuestionAnswerPair: React.FC<Props> = ({
       <Flex direction={{ default: 'column' }} gap={{ default: 'gapMd' }}>
         <FlexItem className="q-and-a-field">
           <TextArea
+            className="q-and-a-field__text-area"
             autoResize
             rows={1}
             resizeOrientation="vertical"
@@ -55,7 +56,6 @@ const KnowledgeQuestionAnswerPair: React.FC<Props> = ({
             validated={questionAndAnswerPair.isQuestionValid === ValidatedOptions.error ? ValidatedOptions.error : ValidatedOptions.default}
             onChange={(_event, questionValue) => handleQuestionInputChange(index, questionValue)}
             onBlur={() => handleQuestionBlur(index)}
-            style={{ paddingBottom: '1rem' }}
           />
           {questionWordCount > 0 ? (
             <HelperText className="q-and-a-field__text-help">
@@ -75,6 +75,7 @@ const KnowledgeQuestionAnswerPair: React.FC<Props> = ({
         </FlexItem>
         <FlexItem className="q-and-a-field">
           <TextArea
+            className="q-and-a-field__text-area"
             autoResize
             rows={1}
             resizeOrientation="vertical"
@@ -84,7 +85,6 @@ const KnowledgeQuestionAnswerPair: React.FC<Props> = ({
             validated={questionAndAnswerPair.isAnswerValid === ValidatedOptions.error ? ValidatedOptions.error : ValidatedOptions.default}
             onChange={(_event, answerValue) => handleAnswerInputChange(index, answerValue)}
             onBlur={() => handleAnswerBlur(index)}
-            style={{ paddingBottom: '1rem' }}
           />
           {answerWordCount > 0 ? (
             <HelperText className="q-and-a-field__text-help">

src/components/Contribute/Knowledge/KnowledgeSeedExamples/KnowledgeSeedExamples.scss

@@ -27,10 +27,20 @@
     }
     .q-and-a-field {
       position: relative;
+      &__text-area {
+        textarea {
+          padding-bottom: 1rem;
+          &:not(:focus-visible) {
+            outline: var(--pf-t--global--background--color--primary--default) auto 1px;
+          }
+        }
+      }
       &__text-help {
         position: absolute;
-        bottom: var(--pf-t--global--spacer--sm);
+        bottom: calc(var(--pf-t--global--spacer--xs) + 3px);
         left: var(--pf-t--global--spacer--md);
+        background-color: var(--pf-t--global--background--color--primary--default);
+        width: calc(100% - 2 * var(--pf-t--global--spacer--lg));
       }
     }
   }