fix: multiline card name indentation, fix #456

SpaceCowMedia · Jan 7, 2025 · 85fb172 · 85fb172
1 parent 8a3594e
commit 85fb172
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/components/search/ComboResults/ComboResults.tsx b/src/components/search/ComboResults/ComboResults.tsx
@@ -88,7 +88,7 @@ export const ComboResult: React.FC<ResultProps> = ({
             <span className="sr-only">Cards in combo:</span>
             {combo.uses.map(({ card, quantity }) => (
               <CardTooltip cardName={quantity > 1 ? `${quantity}x ${card.name}` : card.name} key={card.name}>
-                <div className="card-name pl-3 pr-3">
+                <div className={`card-name pl-3 pr-3 ${styles.cardName}`}>
                   {decklist && quantity - (decklist.get(card.name.toLowerCase()) ?? 0) > 0 ? (
                     decklistMessage != undefined ? (
                       <strong className="text-blue-800">

diff --git a/src/components/search/ComboResults/comboResults.module.scss b/src/components/search/ComboResults/comboResults.module.scss
@@ -21,6 +21,11 @@
     @apply w-full bg-pink-300 text-right dark:bg-link;
   }
 
+  .cardName {
+    text-indent: -1em;
+    margin-left: 1em;
+  }
+
   @media (min-width: 768px) {
     .comboResult {
       @apply m-2;