feat: make FE Samples reasonably responsive

Author: nirushika

src/scenarios/catalog-consumption/GetSingleItem/GetSingleItem.tsx

@@ -74,14 +74,16 @@ export const GetSingleItem: React.FC = () => {
         <Divider />
 
         <Form>
-          <Form.Input
-            control={VariableSearch}
-            width={4}
-            icon="id card outline"
-            label="Entity ID"
-            value={entityId}
-            setStateValue={setEntityId}
-          />
+          <Form.Group>
+            <Form.Input
+              control={VariableSearch}
+              width={4}
+              icon="id card outline"
+              label="Entity ID"
+              value={entityId}
+              setStateValue={setEntityId}
+            />
+          </Form.Group>
 
           <Button
             primary

src/scenarios/user-authentication/ResetPasswordWithAxAuth/ResetPasswordWithAxAuth.tsx

@@ -163,7 +163,7 @@ export const ResetPasswordWithAxauth: React.FC = () => {
   return (
     <>
       <Form onSubmit={handleInitiateResetPassword}>
-        <Form.Input width={12}>
+        <Form.Group>
           <Form.Input
             width={4}
             icon="user"
@@ -174,7 +174,7 @@ export const ResetPasswordWithAxauth: React.FC = () => {
             onChange={(event) => setEmail(event.target.value)}
             value={email}
           />
-        </Form.Input>
+        </Form.Group>
 
         <Button type="submit" primary>
           Initiate Reset Password
@@ -184,25 +184,29 @@ export const ResetPasswordWithAxauth: React.FC = () => {
       <Divider />
 
       <Form onSubmit={handleCompleteResetPasswordClick}>
-        <Form.Input
-          width={4}
-          icon="lock"
-          iconPosition="left"
-          label="New password"
-          placeholder="New password"
-          type="password"
-          onChange={(event) => setNewPassword(event.target.value)}
-          value={newPassword}
-        />
-        <Form.Input
-          width={4}
-          icon="key"
-          iconPosition="left"
-          placeholder="Enter the Reset-Password OTP"
-          label="Reset-Password OTP"
-          onChange={(event) => setResetOTP(event.target.value)}
-          value={resetOTP}
-        />
+        <Form.Group>
+          <Form.Input
+            width={4}
+            icon="lock"
+            iconPosition="left"
+            label="New password"
+            placeholder="New password"
+            type="password"
+            onChange={(event) => setNewPassword(event.target.value)}
+            value={newPassword}
+          />
+        </Form.Group>
+        <Form.Group>
+          <Form.Input
+            width={4}
+            icon="key"
+            iconPosition="left"
+            placeholder="Enter the Reset-Password OTP"
+            label="Reset-Password OTP"
+            onChange={(event) => setResetOTP(event.target.value)}
+            value={resetOTP}
+          />
+        </Form.Group>
 
         <Button type="submit" primary>
           Complete Reset Password

src/scenarios/user-authentication/SignInWithAxAuth/SignInWithAxAuth.tsx

@@ -133,30 +133,34 @@ export const SignInWithAxAuth: React.FC = () => {
   return (
     <>
       <Form onSubmit={signIn}>
-        <Form.Input
-          width={4}
-          icon="user"
-          iconPosition="left"
-          placeholder="Email"
-          label="Email"
-          value={email}
-          onChange={(event) => {
-            setEmail(event.target.value);
-          }}
-        />
-
-        <Form.Input
-          width={4}
-          icon="lock"
-          iconPosition="left"
-          placeholder="Password"
-          type="password"
-          label="Password"
-          value={password}
-          onChange={(event) => {
-            setPassword(event.target.value);
-          }}
-        />
+        <Form.Group>
+          <Form.Input
+            width={4}
+            icon="user"
+            iconPosition="left"
+            placeholder="Email"
+            label="Email"
+            value={email}
+            onChange={(event) => {
+              setEmail(event.target.value);
+            }}
+          />
+        </Form.Group>
+
+        <Form.Group>
+          <Form.Input
+            width={4}
+            icon="lock"
+            iconPosition="left"
+            placeholder="Password"
+            type="password"
+            label="Password"
+            value={password}
+            onChange={(event) => {
+              setPassword(event.target.value);
+            }}
+          />
+        </Form.Group>
 
         <Button type="submit" primary>
           Sign In

src/scenarios/user-authentication/SignInWithExternalIdps/SignInWithExternalIdps.tsx

@@ -125,7 +125,7 @@ export const SignInWithExternalIdps: React.FC = () => {
             return (
               <React.Fragment key={idpConfig.idpConnectionId}>
                 <Grid.Row style={{ paddingBottom: 0 }}>
-                  <Grid.Column width={4}>
+                  <Grid.Column mobile={16} tablet={8} computer={4}>
                     <Button
                       fluid
                       color={

src/scenarios/user-authentication/SignUpWithAxAuth/SignUpWithAxAuth.tsx

@@ -257,15 +257,17 @@ export const SignUpWithAxAuth: React.FC = () => {
       <Divider />
 
       <Form onSubmit={completeSignUp}>
-        <Form.Input
-          width={4}
-          icon="key"
-          iconPosition="left"
-          placeholder="Enter the Sign-Up OTP"
-          label="Sign Up OTP"
-          onChange={(event) => setSignUpOtp(event.target.value)}
-          value={signUpOtp}
-        />
+        <Form.Group>
+          <Form.Input
+            width={4}
+            icon="key"
+            iconPosition="left"
+            placeholder="Enter the Sign-Up OTP"
+            label="Sign Up OTP"
+            onChange={(event) => setSignUpOtp(event.target.value)}
+            value={signUpOtp}
+          />
+        </Form.Group>
 
         <Button type="submit" primary>
           Complete Sign Up

src/scenarios/user-profile-management/CreateProfile/CreateProfile.tsx

@@ -130,32 +130,36 @@ export const CreateProfile: React.FC = () => {
 
   return (
     <Form onSubmit={createProfile}>
-      <Form.Input
-        width={4}
-        icon="id card outline"
-        iconPosition="left"
-        type="text"
-        placeholder="Display Name"
-        label="Display Name"
-        value={displayName}
-        required
-        onChange={(event) => {
-          setDisplayName(event.target.value);
-        }}
-      />
-
-      <Form.Input
-        width={4}
-        icon="image outline"
-        iconPosition="left"
-        type="text"
-        placeholder="Profile Picture URL"
-        label="Profile Picture URL"
-        value={profilePictureUrl}
-        onChange={(event) => {
-          setProfilePictureUrl(event.target.value);
-        }}
-      />
+      <Form.Group>
+        <Form.Input
+          width={4}
+          icon="id card outline"
+          iconPosition="left"
+          type="text"
+          placeholder="Display Name"
+          label="Display Name"
+          value={displayName}
+          required
+          onChange={(event) => {
+            setDisplayName(event.target.value);
+          }}
+        />
+      </Form.Group>
+
+      <Form.Group>
+        <Form.Input
+          width={4}
+          icon="image outline"
+          iconPosition="left"
+          type="text"
+          placeholder="Profile Picture URL"
+          label="Profile Picture URL"
+          value={profilePictureUrl}
+          onChange={(event) => {
+            setProfilePictureUrl(event.target.value);
+          }}
+        />
+      </Form.Group>
 
       <Button type="submit" primary>
         Create New Profile

src/scenarios/user-profile-management/DeleteProfile/DeleteProfile.tsx

@@ -145,29 +145,31 @@ export const DeleteProfile: React.FC = () => {
 
   return (
     <Form onSubmit={deleteProfile}>
-      <Form.Dropdown
-        width={4}
-        selection
-        fluid
-        label="User Profile"
-        placeholder="Select a profile to delete"
-        options={userProfiles.map((profile) => {
-          return {
-            image: {
-              avatar: true,
-              src: profile.profilePictureUrl
-                ? profile.profilePictureUrl
-                : MissingUserProfilePicture,
-            },
-            text: profile.displayName,
-            value: profile.id,
-          };
-        })}
-        value={selectedProfileId}
-        onChange={(event, { value }) => {
-          setSelectedProfileId(value as string);
-        }}
-      ></Form.Dropdown>
+      <Form.Group>
+        <Form.Dropdown
+          width={4}
+          selection
+          fluid
+          label="User Profile"
+          placeholder="Select a profile to delete"
+          options={userProfiles.map((profile) => {
+            return {
+              image: {
+                avatar: true,
+                src: profile.profilePictureUrl
+                  ? profile.profilePictureUrl
+                  : MissingUserProfilePicture,
+              },
+              text: profile.displayName,
+              value: profile.id,
+            };
+          })}
+          value={selectedProfileId}
+          onChange={(event, { value }) => {
+            setSelectedProfileId(value as string);
+          }}
+        ></Form.Dropdown>
+      </Form.Group>
 
       <Button type="submit" primary disabled={selectedProfileId === ''}>
         Delete Profile

src/scenarios/user-profile-management/SwitchActiveProfile/SwitchActiveProfile.tsx

@@ -143,29 +143,31 @@ export const SwitchActiveProfile: React.FC = () => {
 
   return (
     <Form onSubmit={switchActiveProfile}>
-      <Form.Dropdown
-        width={4}
-        selection
-        fluid
-        label="User Profile"
-        placeholder="Select a profile to make active"
-        options={userProfiles.map((profile) => {
-          return {
-            image: {
-              avatar: true,
-              src: profile.profilePictureUrl
-                ? profile.profilePictureUrl
-                : MissingUserProfilePicture,
-            },
-            text: profile.displayName,
-            value: profile.id,
-          };
-        })}
-        value={selectedProfileId}
-        onChange={(event, { value }) => {
-          setSelectedProfileId(value as string);
-        }}
-      ></Form.Dropdown>
+      <Form.Group>
+        <Form.Dropdown
+          width={4}
+          selection
+          fluid
+          label="User Profile"
+          placeholder="Select a profile to make active"
+          options={userProfiles.map((profile) => {
+            return {
+              image: {
+                avatar: true,
+                src: profile.profilePictureUrl
+                  ? profile.profilePictureUrl
+                  : MissingUserProfilePicture,
+              },
+              text: profile.displayName,
+              value: profile.id,
+            };
+          })}
+          value={selectedProfileId}
+          onChange={(event, { value }) => {
+            setSelectedProfileId(value as string);
+          }}
+        ></Form.Dropdown>
+      </Form.Group>
 
       <Button type="submit" primary disabled={selectedProfileId === ''}>
         Activate Profile