fix: Restore reponsiveness inside prompt input secondary actions (#3713)

Author: gethinwebster

pages/prompt-input/permutations.page.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
-import { Button } from '~components';
+import { Button, FileTokenGroup } from '~components';
 import PromptInput, { PromptInputProps } from '~components/prompt-input';
 
 import img from '../icon/custom-icon.png';
@@ -84,6 +84,37 @@ const permutations = createPermutations<PromptInputProps>([
     secondaryActions: [undefined, 'secondary actions'],
     disableSecondaryActionsPaddings: [false, true],
   },
+  {
+    value: ['Short value for secondary action responsiveness'],
+    actionButtonIconName: [undefined, 'send'],
+    secondaryActions: [
+      'short',
+      'longer but breakable secondary action content',
+      'longerbutunbreakablesecondaryactioncontent',
+      <FileTokenGroup
+        key="file-token"
+        items={[
+          {
+            file: new File([new Blob(['Test content'])], 'test-for-venue-use-case.pdf', {
+              type: 'application/pdf',
+              lastModified: 1590962400000,
+            }),
+          },
+        ]}
+        onDismiss={() => {}}
+        showFileSize={true}
+        showFileLastModified={true}
+        showFileThumbnail={true}
+        i18nStrings={{
+          removeFileAriaLabel: () => 'Remove file',
+          limitShowFewer: 'Show fewer files',
+          limitShowMore: 'Show more files',
+          errorIconAriaLabel: 'Error',
+          warningIconAriaLabel: 'Warning',
+        }}
+      />,
+    ],
+  },
 ]);
 
 export default function PromptInputPermutations() {

src/prompt-input/internal.tsx

@@ -230,6 +230,7 @@ const InternalPromptInput = React.forwardRef(
             <div
               className={clsx(styles['secondary-actions'], testutilStyles['secondary-actions'], {
                 [styles['with-paddings']]: !disableSecondaryActionsPaddings,
+                [styles['with-paddings-and-actions']]: !disableSecondaryActionsPaddings && hasActionButton,
                 [styles.invalid]: invalid,
                 [styles.warning]: warning,
               })}

src/prompt-input/styles.scss

@@ -177,8 +177,13 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
 }
 
 .secondary-actions {
+  flex-basis: max-content;
+  flex-grow: 0;
+  flex-shrink: 1;
+  box-sizing: border-box;
+  @include styles.text-flex-wrapping;
   &.with-paddings {
-    padding-inline-start: styles.$control-padding-horizontal;
+    padding-inline: styles.$control-padding-horizontal;
     padding-block-start: awsui.$space-scaled-s;
     padding-block-end: styles.$control-padding-vertical;
 
@@ -187,6 +192,9 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
       padding-inline-start: $invalid-border-offset;
     }
   }
+  &.with-paddings-and-actions {
+    padding-inline-end: 0;
+  }
 }
 
 .buffer {