Fix appearance for series with weird image proportions

ChristChurchMayfair · Sep 10, 2018 · e0a2c5e · e0a2c5e
1 parent 85a1035
commit e0a2c5e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/src/components/FeaturedSermons/index.js b/src/components/FeaturedSermons/index.js
@@ -26,6 +26,7 @@ const Link = styled.a`
     text-decoration: none !important;
     display: block;
     transition: opacity 0.2s ease-out;
+    width: 100%;
 
     @media ${MEDIA_QUERIES.canHover} {
         &:hover {

diff --git a/src/components/SeriesList/SeriesListItem.js b/src/components/SeriesList/SeriesListItem.js
@@ -7,9 +7,10 @@ import { type Series } from "../../types";
 import SeriesThumbnail from "../SeriesThumbnail";
 import OpacityButton from "../OpacityButton";
 
-const Thumbnail = styled.div`
+const Button = styled(OpacityButton)`
     font-size: 1rem;
     line-height: normal;
+    width: 100%;
 `;
 
 type Props = {|
@@ -21,15 +22,13 @@ export default class SeriesListItem extends PureComponent<Props> {
     render() {
         const { series, onClick } = this.props;
         return (
-            <OpacityButton
+            <Button
                 onClick={() => {
                     onClick(series.id);
                 }}
             >
-                <Thumbnail>
-                    <SeriesThumbnail series={series} />
-                </Thumbnail>
-            </OpacityButton>
+                <SeriesThumbnail series={series} />
+            </Button>
         );
     }
 }