Merge pull request #116 from adaptui/webapp-fix

Author: Karthik-B-06

example/src/modules/feedback/SpinnerScreen.tsx

@@ -63,6 +63,7 @@ export const SpinnerScreen = () => {
               setSelectedTheme(value as SpinnerTheme)
             }
             orientation="horizontal"
+            style={tailwind.style("flex-wrap")}
           >
             <Radio value="base" label="base" />
             <Radio value="primary" label="primary" />

example/src/modules/forms/InputScreen.tsx

@@ -79,6 +79,7 @@ export const InputScreen = () => {
               setSelectedVariant(value as InputVariants)
             }
             orientation="horizontal"
+            style={tailwind.style("flex-wrap")}
           >
             <Radio value="outline" label="outline" />
             <Radio value="subtle" label="subtle" />

example/src/modules/forms/SelectScreen.tsx

@@ -136,6 +136,7 @@ export const SelectScreen = () => {
                 setSelectedVariant(value as SelectVariants)
               }
               orientation="horizontal"
+              style={tailwind.style("flex-wrap")}
             >
               <Radio value="outline" label="outline" />
               <Radio value="subtle" label="subtle" />

example/src/modules/popups/TooltipScreen.tsx

@@ -39,7 +39,7 @@ export const TooltipScreen = () => {
               themeColor="success"
               size="sm"
             >
-              Tooltip
+              Click here
             </Button>
           }
           content="2 out 3 tasks completed"
@@ -61,6 +61,7 @@ export const TooltipScreen = () => {
               setTooltipPlacement(value as TooltipPlacement)
             }
             orientation="horizontal"
+            style={tailwind.style("flex-wrap")}
           >
             <Radio value="top" label="top" />
             <Radio value="bottom" label="bottom" />
@@ -76,7 +77,9 @@ export const TooltipScreen = () => {
             <Radio value="left top" label="left top" />
           </RadioGroup>
         </Group>
-        <Box style={tailwind.style("flex flex-row justify-start w-full")}>
+        <Box
+          style={tailwind.style("flex flex-row justify-start w-full flex-wrap")}
+        >
           <Switch
             state={hasArrow}
             onStateChange={(value: SetStateAction<boolean>) =>

example/src/modules/primitives/AvatarGroupScreen.tsx

@@ -70,24 +70,23 @@ export const AvatarGroupScreen = () => {
 
   const avatars = [
     {
-      uri: "https://i.pravatar.cc/300??img=6",
+      uri: "https://i.pravatar.cc/300?img=41",
       name: "Navin Moorthy",
     },
     {
-      uri: "https://i.pravatar.cc/300??img=13",
+      uri: "https://i.pravatar.cc/300?img=13",
       name: "Karthik Balasubramanian",
     },
-
     {
-      uri: "https://i.pravatar.cc/300??img=25",
+      uri: "https://i.pravatar.cc/300?img=32",
       name: "Sandeep Prabhakaran",
     },
     {
-      uri: "https://i.pravatar.cc/300??img=33",
+      uri: "https://i.pravatar.cc/300?img=26",
       name: "Abhishek MG",
     },
     {
-      uri: "https://i.pravatar.cc/300??img=45",
+      uri: "https://i.pravatar.cc/300?img=57",
       name: "Udhaya Chandran",
     },
   ];
@@ -138,6 +137,7 @@ export const AvatarGroupScreen = () => {
             value={selectedSize}
             onChange={(value: string) => setSelectedSize(value as AvatarSizes)}
             orientation="horizontal"
+            style={tailwind.style("flex-wrap")}
           >
             <Radio value="xs" label="xs" />
             <Radio value="sm" label="sm" />

example/src/modules/primitives/AvatarScreen.tsx

@@ -44,7 +44,7 @@ export const AvatarScreen = () => {
         break;
       case "withImage":
         setImageUri({
-          uri: "https://i.pravatar.cc/300??img=5",
+          uri: "https://i.pravatar.cc/300?img=68",
           cache: "reload",
         });
         setName(undefined);
@@ -96,6 +96,7 @@ export const AvatarScreen = () => {
             value={selectedSize}
             onChange={(value: string) => setSelectedSize(value as AvatarSizes)}
             orientation="horizontal"
+            style={tailwind.style("flex-wrap")}
           >
             <Radio value="xs" label="xs" />
             <Radio value="sm" label="sm" />
@@ -126,6 +127,7 @@ export const AvatarScreen = () => {
               setSelectedStatus(value as AvatarStatusType)
             }
             orientation="horizontal"
+            style={tailwind.style("flex-wrap")}
           >
             <Radio value={undefined} label="default" />
             <Radio value="active" label="active" />

example/src/modules/primitives/BadgeScreen.tsx

@@ -76,6 +76,7 @@ export const BadgeScreen = () => {
             value={theme}
             onChange={(value: string) => setTheme(value as BadgeTheme)}
             orientation="horizontal"
+            style={tailwind.style("flex-wrap")}
           >
             <Radio value="base" label="base" />
             <Radio value="danger" label="danger" />

example/src/modules/primitives/ButtonScreen.tsx

@@ -83,6 +83,7 @@ export const ButtonScreen = () => {
             value={selectedTheme}
             onChange={(value: string) => setSelectedTheme(value as ButtonTheme)}
             orientation="horizontal"
+            style={tailwind.style("flex-wrap")}
           >
             <Radio value="base" label="base" />
             <Radio value="primary" label="primary" />