fix: adjust responsive widht heidht (#151)

Author: bxcodec

app/assets/medium.ts

@@ -1,14 +1,14 @@
 // @ts-ignore
 export default ({ title, description, date, url, thumbnail }) => `
-<svg fill="none" width="800" height="120" xmlns="http://www.w3.org/2000/svg">
+<svg fill="none" width="100%" height="100%" viewBox="0 0 1000 140" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
 	<foreignObject width="100%" height="100%">
 		<div xmlns="http://www.w3.org/1999/xhtml">
 			<style>
-				*{
+				* {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
-          font-family: sans-serif
+          font-family: sans-serif;
 				}
         @keyframes gradientBackground {
 					0% {
@@ -20,13 +20,18 @@ export default ({ title, description, date, url, thumbnail }) => `
 				}
 				.flex {
 					display: flex;
-					align-items:center;
+					align-items: center;
+          width: 100%;
+          height: 100%;
         }
-        .outer-container{
-          height:120px;
+        .outer-container {
+          width: 100%;
+          height: 100%;
+          min-height: 140px;
         }
-				.container{
-          height: 118px;
+				.container {
+          height: 100%;
+          width: 100%;
           border: 1px solid rgba(0,0,0,.2);
           padding: 10px 20px;
           border-radius: 10px;
@@ -41,29 +46,38 @@ export default ({ title, description, date, url, thumbnail }) => `
           margin-right: 10px;
           width: 150px;
           height: 100%;
+          min-height: 98px; /* 140px - 2 * 10px padding - 2 * 1px border */
           object-fit: cover;
         }
-        .right{
+        .right {
           flex: 1;
+          min-width: 0; /* This helps with text overflow */
         }
-        a{
+        a {
           text-decoration: none;
-          color: inherit
+          color: inherit;
         }
         p {
           line-height: 1.5;
-          color: #555
+          color: #555;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
         }
-        h3{
-          color: #333
+        h3 {
+          color: #333;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
-        small{
+        small {
           color: #888;
           display: block;
           margin-top: 5px;
-          margin-bottom: 8px
+          margin-bottom: 8px;
         }
-				
 			</style>
       <div class="outer-container flex">
         <a class="container flex" href="${url}" target="__blank">
@@ -78,4 +92,4 @@ export default ({ title, description, date, url, thumbnail }) => `
 		</div>
 	</foreignObject>
 </svg>
-`;
+`;