FAB mobile icon not centered fix

Author: Ohswedd

css/components/fab.css

@@ -1,101 +1,77 @@
 /* Base Floating Action Button (FAB) Styling */
 .fab {
-    position: fixed;
-    bottom: var(--space-8, 2rem);
-    right: var(--space-8, 2rem);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: clamp(1rem, 2vw, 1.5rem);
-    font-size: 1.5rem;
-    background-color: var(--variant-bg, var(--primary));
-    color: var(--variant-text, #ffffff);
-    cursor: pointer;
-    border: none;
-    box-shadow: var(--shadow-lg, 0 4px 8px rgba(0, 0, 0, 0.2));
-    border-radius: var(--radius-full, 50%);
-    transition: 
-      background-color var(--transition-colors, 0.2s ease), 
-      transform var(--transition-transform, 0.2s ease), 
-      box-shadow var(--transition-transform, 0.2s ease);
-    z-index: var(--z-50);
-  }
-  
-  /* FAB Hover and Active States */
-  .fab:hover {
-    transform: translateY(-3px);
-    box-shadow: var(--shadow-md, 0 6px 10px rgba(0, 0, 0, 0.15));
-    background-color: var(--variant-hover-bg, var(--primary-hover));
-  }
-  
-  .fab:active {
-    transform: translateY(1px);
-    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.1));
-  }
-  
-  /* Shape Variants */
-  .fab[data-shape="circular"] {
-    border-radius: var(--radius-full, 50%);
-  }
-  
-  .fab[data-shape="square"] {
-    border-radius: 0;
-  }
-  
-  .fab[data-shape="rectangular"] {
-    border-radius: var(--radius-md, 0.375rem);
-    padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem);
-  }
-  
-  /* Style Variants */
-  .fab[data-style="bordered"] {
-    border: 2px solid var(--variant-border, var(--primary-dark));
-  }
-  
-  .fab[data-style="outlined"] {
-    background-color: transparent;
-    border: 2px solid var(--variant-bg, var(--primary));
-    color: var(--variant-bg, var(--primary));
-    box-shadow: none;
-  }
-  
-  .fab[data-style="outlined"]:hover {
-    background-color: var(--variant-hover-bg, var(--primary-hover));
-    color: var(--variant-text, #ffffff);
-  }
-  
-  .fab[data-style="ghost"] {
-    background-color: transparent;
-    color: var(--variant-bg, var(--primary));
-    box-shadow: none;
-  }
-  
-  .fab[data-style="ghost"]:hover {
-    background-color: var(--neutral-100, #f1f5f9);
-  }
-  
-  /* Icon Alignment Fix for All Screens */
-  .fab > * {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: inherit;
-    height: 100%;
-    width: 100%;
-  }
-  
-  /* Responsive Adjustments */
-  @media (max-width: 768px) {
-    .fab {
+  position: fixed;
+  bottom: var(--space-8, 2rem);
+  right: var(--space-8, 2rem);
+  display: flex; /* Flexbox ensures centering of children */
+  align-items: center; /* Vertically center content */
+  justify-content: center; /* Horizontally center content */
+  padding: 0; /* Remove default padding for precise centering */
+  font-size: 1.5rem;
+  width: clamp(3rem, 8vw, 4rem); /* Ensure FAB is always square */
+  height: clamp(3rem, 8vw, 4rem); /* Match width for perfect circle */
+  background-color: var(--variant-bg, var(--primary));
+  color: var(--variant-text, #ffffff);
+  cursor: pointer;
+  border: none;
+  box-shadow: var(--shadow-lg, 0 4px 8px rgba(0, 0, 0, 0.2));
+  border-radius: var(--radius-full, 50%); /* Circular shape */
+  transition: 
+    background-color var(--transition-colors, 0.2s ease), 
+    transform var(--transition-transform, 0.2s ease), 
+    box-shadow var(--transition-transform, 0.2s ease);
+  z-index: var(--z-50);
+}
+
+/* Ensure Icon Stays Centered Inside FAB */
+.fab > * {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%; /* Icon scales with FAB size */
+  height: 100%; /* Icon scales with FAB size */
+  font-size: inherit; /* Inherit FAB font size */
+  line-height: 1; /* Prevent text alignment issues */
+}
+
+/* FAB Hover and Active States */
+.fab:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-md, 0 6px 10px rgba(0, 0, 0, 0.15));
+  background-color: var(--variant-hover-bg, var(--primary-hover));
+}
+
+.fab:active {
+  transform: translateY(1px);
+  box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.1));
+}
+
+/* Shape Variants */
+.fab[data-shape="circular"] {
+  border-radius: var(--radius-full, 50%);
+  padding: 0; /* Ensure circular shape is preserved */
+}
+
+.fab[data-shape="square"] {
+  border-radius: 0;
+}
+
+.fab[data-shape="rectangular"] {
+  border-radius: var(--radius-md, 0.375rem);
+  padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem);
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  .fab {
       width: clamp(2.5rem, 8vw, 3rem);
       height: clamp(2.5rem, 8vw, 3rem);
       bottom: var(--space-4, 1rem);
       right: var(--space-4, 1rem);
       font-size: 1.25rem;
-    }
-  
-    .fab > * {
+  }
+
+  .fab > * {
       font-size: 1.25rem;
-    }
   }
-  
+}