Live video on the AT Protocol

add max width on not desktop

+17 -4
+17 -4
js/components/src/components/ui/toast.tsx
··· 351 351 const styles: ViewStyle = { 352 352 position: "absolute", 353 353 zIndex: 1000, 354 - width: isDesktop ? 400 : "100%", 355 354 paddingHorizontal: isDesktop ? 0 : theme.spacing[4], 356 355 }; 356 + 357 + // Set width/maxWidth 358 + if (isDesktop) { 359 + styles.width = 400; 360 + } else { 361 + styles.width = "100%"; 362 + styles.maxWidth = 400; 363 + } 357 364 358 365 if (resolvedPosition.includes("top")) { 359 366 styles.top = insets.top + theme.spacing[4]; ··· 370 377 styles.alignItems = "flex-end"; 371 378 } 372 379 if (resolvedPosition.includes("center")) { 373 - styles.left = 0; 374 - styles.right = 0; 375 380 styles.alignItems = "center"; 381 + // Center the container itself when it has maxWidth 382 + if (!isDesktop) { 383 + styles.left = "50%"; 384 + styles.transform = [{ translateX: "-50%" }]; 385 + } else { 386 + styles.left = 0; 387 + styles.right = 0; 388 + } 376 389 } 377 390 378 391 return styles; ··· 790 803 justifyContent: "space-between", 791 804 alignItems: "center", 792 805 padding: theme.spacing[4], 793 - width: isDesktop ? "100%" : "95%", 806 + width: "100%", 794 807 }, 795 808 variantStyles[variant], 796 809 ]}