diff --git a/example/lib/src/storybook/stories/authcode.dart b/example/lib/src/storybook/stories/authcode.dart
index 7e783852..575d44ad 100644
--- a/example/lib/src/storybook/stories/authcode.dart
+++ b/example/lib/src/storybook/stories/authcode.dart
@@ -139,104 +139,109 @@ class AuthCodeStory extends Story {
 
             return StatefulBuilder(
               builder: (context, setState) {
-                return Column(
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: [
-                    const SizedBox(height: 64),
-                    const TextDivider(text: "Disabled MoonAuthCode"),
-                    const SizedBox(height: 32),
-                    MoonAuthCode(
-                      enableInputFill: true,
-                      authInputFieldCount: 4,
-                      mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center,
-                      borderRadius:
-                          borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
-                      selectedFillColor: selectedFillColor,
-                      activeFillColor: activeFillColor,
-                      inactiveFillColor: inactiveFillColor,
-                      selectedBorderColor: selectedBorderColor,
-                      activeBorderColor: activeBorderColor,
-                      inactiveBorderColor: inactiveBorderColor,
-                      enabled: enableKnob,
-                      gap: gapKnob?.toDouble(),
-                      authFieldShape: shapeKnob,
-                      obscureText: obscuringKnob,
-                      obscuringCharacter: '﹡',
-                      peekWhenObscuring: peekWhenObscuringKnob,
-                      validator: (String? value) => null,
-                      errorBuilder: (BuildContext context, String? errorText) => const SizedBox(),
+                return Center(
+                  child: SingleChildScrollView(
+                    physics: const NeverScrollableScrollPhysics(),
+                    child: Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        const SizedBox(height: 64),
+                        const TextDivider(text: "Disabled MoonAuthCode"),
+                        const SizedBox(height: 32),
+                        MoonAuthCode(
+                          enableInputFill: true,
+                          authInputFieldCount: 4,
+                          mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center,
+                          borderRadius:
+                              borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
+                          selectedFillColor: selectedFillColor,
+                          activeFillColor: activeFillColor,
+                          inactiveFillColor: inactiveFillColor,
+                          selectedBorderColor: selectedBorderColor,
+                          activeBorderColor: activeBorderColor,
+                          inactiveBorderColor: inactiveBorderColor,
+                          enabled: enableKnob,
+                          gap: gapKnob?.toDouble(),
+                          authFieldShape: shapeKnob,
+                          obscureText: obscuringKnob,
+                          obscuringCharacter: '﹡',
+                          peekWhenObscuring: peekWhenObscuringKnob,
+                          validator: (String? value) => null,
+                          errorBuilder: (BuildContext context, String? errorText) => const SizedBox(),
+                        ),
+                        const SizedBox(height: 32),
+                        const TextDivider(text: "Active MoonAuthCode"),
+                        const SizedBox(height: 32),
+                        MoonAuthCode(
+                          autoFocus: true,
+                          enableInputFill: true,
+                          mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center,
+                          borderRadius:
+                              borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
+                          selectedFillColor: selectedFillColor,
+                          activeFillColor: activeFillColor,
+                          inactiveFillColor: inactiveFillColor,
+                          selectedBorderColor: selectedBorderColor,
+                          activeBorderColor: activeBorderColor,
+                          inactiveBorderColor: inactiveBorderColor,
+                          gap: gapKnob?.toDouble(),
+                          authFieldShape: shapeKnob,
+                          obscureText: obscuringKnob,
+                          obscuringCharacter: '﹡',
+                          peekWhenObscuring: peekWhenObscuringKnob,
+                          validator: (String? value) => null,
+                          errorBuilder: (BuildContext context, String? errorText) => const SizedBox(),
+                        ),
+                        const SizedBox(height: 32),
+                        const TextDivider(text: "Error MoonAuthCode"),
+                        const SizedBox(height: 32),
+                        SizedBox(
+                          height: 95,
+                          child: MoonAuthCode(
+                            enableInputFill: true,
+                            authInputFieldCount: 4,
+                            mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center,
+                            borderRadius:
+                                borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
+                            errorStreamController: errorStreamController,
+                            selectedFillColor: selectedFillColor,
+                            activeFillColor: activeFillColor,
+                            inactiveFillColor: inactiveFillColor,
+                            selectedBorderColor: selectedBorderColor,
+                            activeBorderColor: activeBorderColor,
+                            inactiveBorderColor: inactiveBorderColor,
+                            gap: gapKnob?.toDouble(),
+                            authFieldShape: shapeKnob,
+                            obscureText: obscuringKnob,
+                            obscuringCharacter: '﹡',
+                            peekWhenObscuring: peekWhenObscuringKnob,
+                            onCompleted: (pin) {
+                              if (pin != '9921') {
+                                errorStreamController.add(
+                                  errorAnimationKnob ? ErrorAnimationType.shake : ErrorAnimationType.noAnimation,
+                                );
+                              }
+                            },
+                            validator: (pin) {
+                              if (pin?.length == 4 && pin != '9921') {
+                                return 'Invalid authentication code. Please try again.';
+                              }
+                              return null;
+                            },
+                            errorBuilder: (context, errorText) {
+                              return Align(
+                                child: Container(
+                                  padding: const EdgeInsets.only(top: 8),
+                                  child: Text(errorText ?? ''),
+                                ),
+                              );
+                            },
+                          ),
+                        ),
+                        const SizedBox(height: 64),
+                      ],
                     ),
-                    const SizedBox(height: 32),
-                    const TextDivider(text: "Active MoonAuthCode"),
-                    const SizedBox(height: 32),
-                    MoonAuthCode(
-                      autoFocus: true,
-                      enableInputFill: true,
-                      mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center,
-                      borderRadius:
-                          borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
-                      selectedFillColor: selectedFillColor,
-                      activeFillColor: activeFillColor,
-                      inactiveFillColor: inactiveFillColor,
-                      selectedBorderColor: selectedBorderColor,
-                      activeBorderColor: activeBorderColor,
-                      inactiveBorderColor: inactiveBorderColor,
-                      gap: gapKnob?.toDouble(),
-                      authFieldShape: shapeKnob,
-                      obscureText: obscuringKnob,
-                      obscuringCharacter: '﹡',
-                      peekWhenObscuring: peekWhenObscuringKnob,
-                      validator: (String? value) => null,
-                      errorBuilder: (BuildContext context, String? errorText) => const SizedBox(),
-                    ),
-                    const SizedBox(height: 32),
-                    const TextDivider(text: "Error MoonAuthCode"),
-                    const SizedBox(height: 32),
-                    SizedBox(
-                      height: 95,
-                      child: MoonAuthCode(
-                        enableInputFill: true,
-                        authInputFieldCount: 4,
-                        mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center,
-                        borderRadius:
-                            borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
-                        errorStreamController: errorStreamController,
-                        selectedFillColor: selectedFillColor,
-                        activeFillColor: activeFillColor,
-                        inactiveFillColor: inactiveFillColor,
-                        selectedBorderColor: selectedBorderColor,
-                        activeBorderColor: activeBorderColor,
-                        inactiveBorderColor: inactiveBorderColor,
-                        gap: gapKnob?.toDouble(),
-                        authFieldShape: shapeKnob,
-                        obscureText: obscuringKnob,
-                        obscuringCharacter: '﹡',
-                        peekWhenObscuring: peekWhenObscuringKnob,
-                        onCompleted: (pin) {
-                          if (pin != '9921') {
-                            errorStreamController.add(
-                              errorAnimationKnob ? ErrorAnimationType.shake : ErrorAnimationType.noAnimation,
-                            );
-                          }
-                        },
-                        validator: (pin) {
-                          if (pin?.length == 4 && pin != '9921') {
-                            return 'Invalid authentication code. Please try again.';
-                          }
-                          return null;
-                        },
-                        errorBuilder: (context, errorText) {
-                          return Align(
-                            child: Container(
-                              padding: const EdgeInsets.only(top: 8),
-                              child: Text(errorText ?? ''),
-                            ),
-                          );
-                        },
-                      ),
-                    ),
-                    const SizedBox(height: 64),
-                  ],
+                  ),
                 );
               },
             );
diff --git a/example/lib/src/storybook/stories/avatar.dart b/example/lib/src/storybook/stories/avatar.dart
index fbda6826..1c780ced 100644
--- a/example/lib/src/storybook/stories/avatar.dart
+++ b/example/lib/src/storybook/stories/avatar.dart
@@ -136,9 +136,7 @@ class AvatarStory extends Story {
                     showBadge: showBadgeKnob,
                     badgeColor: badgeColor,
                     badgeAlignment: avatarBadgeAlignmentKnob ?? MoonBadgeAlignment.bottomRight,
-                    backgroundImage: const AssetImage(
-                      "assets/images/placeholder-640x359.png",
-                    ),
+                    backgroundImage: const AssetImage("assets/images/placeholder-640x359.png"),
                   ),
                   const SizedBox(height: 64),
                 ],
diff --git a/example/web/index.html b/example/web/index.html
index 73f3dc02..e142eba7 100644
--- a/example/web/index.html
+++ b/example/web/index.html
@@ -19,6 +19,7 @@
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
   <meta name="description" content="Moon Design for Flutter.">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <!-- iOS meta tags & icons -->
   <meta name="apple-mobile-web-app-capable" content="yes">
diff --git a/lib/src/widgets/avatar/avatar_clipper.dart b/lib/src/widgets/avatar/avatar_clipper.dart
index 6301fb8e..983204c2 100644
--- a/lib/src/widgets/avatar/avatar_clipper.dart
+++ b/lib/src/widgets/avatar/avatar_clipper.dart
@@ -92,7 +92,7 @@ class AvatarClipper extends CustomClipper<Path> {
           return Path()
             ..addOval(
               Rect.fromCircle(
-                center: Offset(0 + badgeRadius, width - badgeRadius),
+                center: Offset(0 + badgeRadius, height - badgeRadius),
                 radius: badgeRadius + badgeMarginValue,
               ),
             );
@@ -100,7 +100,7 @@ class AvatarClipper extends CustomClipper<Path> {
           return Path()
             ..addOval(
               Rect.fromCircle(
-                center: Offset(width - badgeRadius, width - badgeRadius),
+                center: Offset(width - badgeRadius, height - badgeRadius),
                 radius: badgeRadius + badgeMarginValue,
               ),
             );