fix: hr and img tags shouldn't break with global css overrides (#102)

* fix: prevent tailwind from overriding the hr tag margin * fix: card title image sizing
ory · Mar 16, 2023 · 40bc4ab · 40bc4ab
1 parent 069fb78
commit 40bc4ab
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 9 deletions.
diff --git a/src/react-components/card.tsx b/src/react-components/card.tsx
@@ -32,12 +32,10 @@ export const Card = ({
   >
     <div className={gridStyle({ gap: 32 })}>
       {image && (
-        <div className={cardTitleImage}>
+        <>
           {typeof image === "string" ? (
             <img
-              style={{
-                width: "auto",
-              }}
+              className={cardTitleImage}
               src={image}
               alt={image}
               width="100%"
@@ -46,7 +44,7 @@ export const Card = ({
           ) : (
             image
           )}
-        </div>
+        </>
       )}
 
       <div className={cardTitleStyle}>

diff --git a/src/theme/card.css.ts b/src/theme/card.css.ts
@@ -36,10 +36,8 @@ export const cardTitleStyle = style({
 })
 
 export const cardTitleImage = style({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  height: pxToRem(42),
+  objectFit: "contain",
+  maxHeight: pxToRem(42),
 })
 
 // recipe for the card style

diff --git a/src/theme/divider.css.ts b/src/theme/divider.css.ts
@@ -36,6 +36,7 @@ export const dividerStyle = recipe({
     borderTop: `${pxToRem(4)} solid`,
     borderColor: oryTheme.border.def,
     width: pxToRem(64),
+    margin: "auto !important",
   },
   variants: {
     sizes: {