feat(frontend-react): Default Widget Padding

Add a default padding to the widget layout, suitable for most widgets.
This can be disabled by setting `borderless: true` in the `Widget` object.

frontend-react/src/lib/widget/component/error-fallback.module.css

@@ -1,5 +1,5 @@
 .alert {
 	height: 100%;
-	margin: 0;
+	margin: -0rem;
 	overflow-y: auto;
 }

frontend-react/src/lib/widget/component/error-fallback.tsx

@@ -1,5 +1,6 @@
 import { Alert, AlertHeading, Button } from 'react-bootstrap';
 import styles from './error-fallback.module.css';
+import { clsx } from 'clsx';
 
 export function ErrorFallback({
 	error,
@@ -9,7 +10,7 @@ export function ErrorFallback({
 	resetErrorBoundary: () => void;
 }) {
 	return (
-		<Alert variant="danger" className={styles.alert}>
+		<Alert variant="danger" className={clsx(styles.alert)}>
 			<AlertHeading>Widget Error</AlertHeading>
 			<p>
 				Unfortunately, the widget encountered an error and cannot be displayed.

frontend-react/src/lib/widget/component/widget-renderer.tsx

@@ -5,9 +5,11 @@ import { getUserData } from '../../user-data';
 import styles from './widget-renderer.module.css';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ErrorFallback } from './error-fallback.tsx';
+import { clsx } from 'clsx';
 
 export interface WidgetRendererProps {
 	widgetInstanceId: string;
+	borderless: boolean;
 }
 
 export const WidgetConfigContext = createContext<unknown>(undefined);
@@ -36,9 +38,11 @@ registerWidget({
 });
 	`;
 
+	const isBorderless = widget?.borderless;
+
 	return (
 		<div
-			className={styles.widgetRenderer}
+			className={clsx(styles.widgetRenderer, !isBorderless && 'p-3')}
 			style={{ '--id': CSS.escape(widgetInstanceId) }}
 		>
 			{widget ? (

frontend-react/src/lib/widget/model.ts

@@ -40,4 +40,8 @@ export interface Widget<
 	 * A configuration element that is used to configure the widget.
 	 */
 	configElement: ReactNode;
+	/**
+	 * If `true`, the widget gets rendered without a default padding.
+	 */
+	borderless?: boolean;
 }