diff --git a/doc/speeddial/MaskDoc.vue b/doc/speeddial/MaskDoc.vue
index 73665dbe6..f0106944f 100644
--- a/doc/speeddial/MaskDoc.vue
+++ b/doc/speeddial/MaskDoc.vue
@@ -2,9 +2,9 @@
     <DocSectionText v-bind="$attrs">
         <p>Adding <i>mask</i> property displays a modal layer behind the popup items.</p>
     </DocSectionText>
-    <div class="card">
+    <div class="card p-3">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />
+            <SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -53,14 +53,13 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />
+<SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" />
 `,
                 options: `
 <template>
-    <div class="card">
+    <div class="card p-3">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />
-            <Toast />
+            <SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" />
         </div>
     </div>
 </template>
@@ -113,10 +112,9 @@ data() {
 `,
                 composition: `
 <template>
-    <div class="card">
+    <div class="card p-3">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />
-            <Toast />
+            <SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" />
         </div>
     </div>
 </template>