FIX cloud size

Author: pubkey

docs-src/src/components/cloud.tsx

@@ -10,18 +10,19 @@ import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 
 interface CloudProps {
   darkMode?: boolean;
+  style?: CSSProperties;
+  className?: string;
 }
 
 // Old icon slides out to the RIGHT; new icon slides in from the LEFT
-export const Cloud: FC<CloudProps> = ({ darkMode = false }) => {
+export const Cloud: FC<CloudProps> = ({ darkMode = false, style, className }) => {
   const [, setIconIndex] = useState(0);
   const [currentUrl, setCurrentUrl] = useState<string>(replicationLinks[0].iconUrl);
   const [prevUrl, setPrevUrl] = useState<string | undefined>(undefined);
 
   const prevRef = useRef<HTMLImageElement | null>(null);
   const currRef = useRef<HTMLImageElement | null>(null);
 
-
   // Handle "heartbeat": advance to next icon and trigger slide transition
   useEffect(() => {
     if (!ExecutionEnvironment.canUseDOM) {
@@ -74,6 +75,7 @@ export const Cloud: FC<CloudProps> = ({ darkMode = false }) => {
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: 12,
+    ...style, // merge custom style
   };
 
   const badgeStyle: CSSProperties = {
@@ -87,8 +89,8 @@ export const Cloud: FC<CloudProps> = ({ darkMode = false }) => {
   const circleBorder: string = darkMode ? 'var(--bg-color-dark)' : 'var(--bg-color)';
 
   const badgeInnerStyle: CSSProperties = {
-    width: 'clamp(10px, 8vw, 56px)',
-    height: 'clamp(10px, 8vw, 56px)',
+    width: '56px',
+    height: '56px',
     background: circleColor,
     borderRadius: '50%',
     display: 'flex',
@@ -109,7 +111,7 @@ export const Cloud: FC<CloudProps> = ({ darkMode = false }) => {
   };
 
   return (
-    <div style={wrapperStyle}>
+    <div style={wrapperStyle} className={className}>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="126"

docs-src/src/components/replication-diagram.tsx

@@ -56,15 +56,15 @@ export function ReplicationDiagram({ scale: scaleProp = 1 }: { scale?: number; }
   const centerX = 250 * scale;
   const centerY = 200 * scale;
 
-  const serverRadius = 35 * scale;
+  const serverRadius = 60 * scale;
   const deviceCount = devices.length;
-  const deviceRadius = 55 * scale;
+  const deviceRadius = 45 * scale;
 
   const deviceDistance = centerY - deviceRadius; // top-most device sits at y=0
   const angleOffset = -Math.PI / 2;
 
-  const serverMargin = 10;
-  const deviceMargin = 0;
+  const serverMargin = 3;
+  const deviceMargin = 7;
 
   const linesData = Array.from({ length: deviceCount }, (_, i) => {
     const angle = angleOffset + (2 * Math.PI * i) / deviceCount;
@@ -161,7 +161,7 @@ export function ReplicationDiagram({ scale: scaleProp = 1 }: { scale?: number; }
           }}
         >
           <Cloud darkMode={true} style={{
-            width: '140%'
+            width: '100%'
           }} />
         </div>