instead of a fixed column layout, fit based on minimum column size

1 files changed, 37 insertions, 39 deletions

diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less
index 38593a8a5..033694b44 100644
--- a/themes/light/tt-rss.less
+++ b/themes/light/tt-rss.less
@@ -755,58 +755,56 @@ body.ttrss_main {
 		display : none;
 	}
 
-	@media screen and (min-width: 1500px) {
-		#headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] {
-			display : grid;
-			grid-template-columns: repeat(2, minmax(0, 1fr));
-			background-color: @color-panel-bg;
-			grid-gap : 8px;
-			padding : 8px;
-
-			.cdm.expanded {
-
-				.header, .content {
-					background : @default-bg;
-					border : 1px solid @border-default;
-					overflow : hidden;
-				}
+	#headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] {
+		display : grid;
+		grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
+		background-color: @color-panel-bg;
+		grid-gap : 8px;
+		padding : 8px;
 
-				.content {
-					border-top-width : 0;
-					padding : 0 4px 4px 4px;
-				}
+		.cdm.expanded {
 
-				.header[data-is-stuck] {
-					top : -8px;
-					border-bottom-width: 1px;
-				}
+			.header, .content {
+				background : @default-bg;
+				border : 1px solid @border-default;
+				overflow : hidden;
+			}
 
-				.header {
-					border-bottom-width : 0;
-					padding : 4px;
+			.content {
+				border-top-width : 0;
+				padding : 0 4px 4px 4px;
+			}
 
-					.feed {
-						display : none;
-					}
-				}
+			.header[data-is-stuck] {
+				top : -8px;
+				border-bottom-width: 1px;
+			}
 
-				.footer {
-					border : 0;
+			.header {
+				border-bottom-width : 0;
+				padding : 4px;
 
-					.right {
-						white-space : nowrap;
-					}
+				.feed {
+					display : none;
 				}
+			}
 
-				.content-inner {
-					word-break: break-all;
+			.footer {
+				border : 0;
+
+				.right {
+					white-space : nowrap;
 				}
 			}
 
-			#headlines-spacer, .whiteBox, .feed-title {
-				grid-column : span 2;
+			.content-inner {
+				word-break: break-all;
 			}
 		}
+
+		#headlines-spacer, .whiteBox, .feed-title {
+			grid-column : 1 e("/") -1;
+		}
 	}
 
 	#headlines-frame {