From 689e5c0004f7b9e24bed797c3fe04f29b58bab2a Mon Sep 17 00:00:00 2001
From: Athou <jeremiepanzer@gmail.com>
Date: Mon, 21 Oct 2024 21:51:46 +0200
Subject: [PATCH] remove image bottom margins (#1587)

---
 .../src/components/content/BasicHtmlStyles.tsx    | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/commafeed-client/src/components/content/BasicHtmlStyles.tsx b/commafeed-client/src/components/content/BasicHtmlStyles.tsx
index 07b726069..f62a87741 100644
--- a/commafeed-client/src/components/content/BasicHtmlStyles.tsx
+++ b/commafeed-client/src/components/content/BasicHtmlStyles.tsx
@@ -1,11 +1,24 @@
 import { TypographyStylesProvider } from "@mantine/core"
 import type { ReactNode } from "react"
+import { tss } from "tss"
 
 /**
  * This component is used to provide basic styles to html typography elements.
  *
  * see https://mantine.dev/core/typography-styles-provider/
  */
+
+const useStyles = tss.create(() => ({
+    // override mantine default typography styles
+    content: {
+        paddingLeft: 0,
+        "& img": {
+            marginBottom: 0,
+        },
+    },
+}))
+
 export const BasicHtmlStyles = (props: { children: ReactNode }) => {
-    return <TypographyStylesProvider pl={0}>{props.children}</TypographyStylesProvider>
+    const { classes } = useStyles()
+    return <TypographyStylesProvider className={classes.content}>{props.children}</TypographyStylesProvider>
 }