Add some padding

packages/shared-components/src/event-tiles/UrlPreviewView/LinkPreview.tsx

@@ -23,6 +23,10 @@ export interface LinkPreviewAdditionalProps {
 
 export type LinkPreviewProps = UrlPreviewViewSnapshotPreview & LinkPreviewActions & LinkPreviewAdditionalProps;
 
+/**
+ * LinkPreview renders a single preview component for a single link on an event. It is usually rendered as part of
+ * a `UrlPreviewGroupView`.
+ */
 export function LinkPreview({ onImageClick, compactLayout, ...preview }: LinkPreviewProps): JSX.Element {
     const { translate: _t } = useI18n();
 

packages/shared-components/src/event-tiles/UrlPreviewView/UrlPreviewGroupView.module.css

@@ -19,6 +19,7 @@
 }
 
 .wrapper {
+    margin-top: var(--cpd-space-4x);
     display: flex;
     flex-direction: row;
 }

packages/shared-components/src/event-tiles/UrlPreviewView/UrlPreviewGroupView.tsx

@@ -33,12 +33,7 @@ export interface UrlPreviewGroupViewActions {
 }
 
 /**
- * UrlPreviewGroupView renders a compact event tile with an icon, title, and optional subtitle/content.
- *
- * @example
- * ```tsx
- * <UrlPreviewGroupView icon={<Icon />} title="Room created" />
- * ```
+ * UrlPreviewGroupView renders a list of URL previews for a single event.
  */
 export function UrlPreviewGroupView({ vm }: UrlPreviewGroupViewProps): JSX.Element | null {
     const { translate: _t } = useI18n();