From fb89c3bad0cc340612f07d2e989b3ff34e0658c5 Mon Sep 17 00:00:00 2001
From: Andrew Dolgov <noreply@fakecake.org>
Date: Wed, 10 Mar 2021 16:14:42 +0300
Subject: [PATCH] instead of a fixed column layout, fit based on minimum column
 size

---
 themes/compact.css       | 84 ++++++++++++++++++++--------------------
 themes/compact_night.css | 84 ++++++++++++++++++++--------------------
 themes/light.css         | 84 ++++++++++++++++++++--------------------
 themes/light/tt-rss.less | 80 +++++++++++++++++++-------------------
 themes/night.css         | 84 ++++++++++++++++++++--------------------
 themes/night_blue.css    | 84 ++++++++++++++++++++--------------------
 6 files changed, 244 insertions(+), 256 deletions(-)

diff --git a/themes/compact.css b/themes/compact.css
index ddaf8c4de..858bdb8f5 100644
--- a/themes/compact.css
+++ b/themes/compact.css
@@ -647,49 +647,47 @@ body.ttrss_main #headlines-wrap-inner {
 body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
   display: none;
 }
-@media screen and (min-width: 1500px) {
-  body.ttrss_main #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: #f5f5f5;
-    grid-gap: 8px;
-    padding: 8px;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header,
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
-    background: white;
-    border: 1px solid #ddd;
-    overflow: hidden;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
-    border-top-width: 0;
-    padding: 0 4px 4px 4px;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
-    top: -8px;
-    border-bottom-width: 1px;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header {
-    border-bottom-width: 0;
-    padding: 4px;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed {
-    display: none;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer {
-    border: 0;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .right {
-    white-space: nowrap;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner {
-    word-break: break-all;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer,
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox,
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title {
-    grid-column: span 2;
-  }
+body.ttrss_main #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: #f5f5f5;
+  grid-gap: 8px;
+  padding: 8px;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
+  background: white;
+  border: 1px solid #ddd;
+  overflow: hidden;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
+  border-top-width: 0;
+  padding: 0 4px 4px 4px;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
+  top: -8px;
+  border-bottom-width: 1px;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header {
+  border-bottom-width: 0;
+  padding: 4px;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed {
+  display: none;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer {
+  border: 0;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .right {
+  white-space: nowrap;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner {
+  word-break: break-all;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title {
+  grid-column: 1 / -1;
 }
 body.ttrss_main #headlines-frame {
   padding: 0px;
diff --git a/themes/compact_night.css b/themes/compact_night.css
index 54dcb9b04..a13b2f6cd 100644
--- a/themes/compact_night.css
+++ b/themes/compact_night.css
@@ -647,49 +647,47 @@ body.ttrss_main #headlines-wrap-inner {
 body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
   display: none;
 }
-@media screen and (min-width: 1500px) {
-  body.ttrss_main #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: #222;
-    grid-gap: 8px;
-    padding: 8px;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header,
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
-    background: #333;
-    border: 1px solid #222;
-    overflow: hidden;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
-    border-top-width: 0;
-    padding: 0 4px 4px 4px;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
-    top: -8px;
-    border-bottom-width: 1px;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header {
-    border-bottom-width: 0;
-    padding: 4px;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed {
-    display: none;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer {
-    border: 0;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .right {
-    white-space: nowrap;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner {
-    word-break: break-all;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer,
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox,
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title {
-    grid-column: span 2;
-  }
+body.ttrss_main #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: #222;
+  grid-gap: 8px;
+  padding: 8px;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
+  background: #333;
+  border: 1px solid #222;
+  overflow: hidden;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
+  border-top-width: 0;
+  padding: 0 4px 4px 4px;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
+  top: -8px;
+  border-bottom-width: 1px;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header {
+  border-bottom-width: 0;
+  padding: 4px;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed {
+  display: none;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer {
+  border: 0;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .right {
+  white-space: nowrap;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner {
+  word-break: break-all;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title {
+  grid-column: 1 / -1;
 }
 body.ttrss_main #headlines-frame {
   padding: 0px;
diff --git a/themes/light.css b/themes/light.css
index 4b2baa286..46dc8e987 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -647,49 +647,47 @@ body.ttrss_main #headlines-wrap-inner {
 body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
   display: none;
 }
-@media screen and (min-width: 1500px) {
-  body.ttrss_main #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: #f5f5f5;
-    grid-gap: 8px;
-    padding: 8px;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header,
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
-    background: white;
-    border: 1px solid #ddd;
-    overflow: hidden;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
-    border-top-width: 0;
-    padding: 0 4px 4px 4px;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
-    top: -8px;
-    border-bottom-width: 1px;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header {
-    border-bottom-width: 0;
-    padding: 4px;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed {
-    display: none;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer {
-    border: 0;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .right {
-    white-space: nowrap;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner {
-    word-break: break-all;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer,
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox,
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title {
-    grid-column: span 2;
-  }
+body.ttrss_main #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: #f5f5f5;
+  grid-gap: 8px;
+  padding: 8px;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
+  background: white;
+  border: 1px solid #ddd;
+  overflow: hidden;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
+  border-top-width: 0;
+  padding: 0 4px 4px 4px;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
+  top: -8px;
+  border-bottom-width: 1px;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header {
+  border-bottom-width: 0;
+  padding: 4px;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed {
+  display: none;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer {
+  border: 0;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .right {
+  white-space: nowrap;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner {
+  word-break: break-all;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title {
+  grid-column: 1 / -1;
 }
 body.ttrss_main #headlines-frame {
   padding: 0px;
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,57 +755,55 @@ 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;
+	#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;
 
-			.cdm.expanded {
+		.cdm.expanded {
 
-				.header, .content {
-					background : @default-bg;
-					border : 1px solid @border-default;
-					overflow : hidden;
-				}
+			.header, .content {
+				background : @default-bg;
+				border : 1px solid @border-default;
+				overflow : hidden;
+			}
 
-				.content {
-					border-top-width : 0;
-					padding : 0 4px 4px 4px;
-				}
+			.content {
+				border-top-width : 0;
+				padding : 0 4px 4px 4px;
+			}
 
-				.header[data-is-stuck] {
-					top : -8px;
-					border-bottom-width: 1px;
-				}
+			.header[data-is-stuck] {
+				top : -8px;
+				border-bottom-width: 1px;
+			}
 
-				.header {
-					border-bottom-width : 0;
-					padding : 4px;
+			.header {
+				border-bottom-width : 0;
+				padding : 4px;
 
-					.feed {
-						display : none;
-					}
-				}
-
-				.footer {
-					border : 0;
-
-					.right {
-						white-space : nowrap;
-					}
-				}
-
-				.content-inner {
-					word-break: break-all;
+				.feed {
+					display : none;
 				}
 			}
 
-			#headlines-spacer, .whiteBox, .feed-title {
-				grid-column : span 2;
+			.footer {
+				border : 0;
+
+				.right {
+					white-space : nowrap;
+				}
 			}
+
+			.content-inner {
+				word-break: break-all;
+			}
+		}
+
+		#headlines-spacer, .whiteBox, .feed-title {
+			grid-column : 1 e("/") -1;
 		}
 	}
 
diff --git a/themes/night.css b/themes/night.css
index 59cde9826..4b76c0289 100644
--- a/themes/night.css
+++ b/themes/night.css
@@ -648,49 +648,47 @@ body.ttrss_main #headlines-wrap-inner {
 body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
   display: none;
 }
-@media screen and (min-width: 1500px) {
-  body.ttrss_main #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: #222;
-    grid-gap: 8px;
-    padding: 8px;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header,
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
-    background: #333;
-    border: 1px solid #222;
-    overflow: hidden;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
-    border-top-width: 0;
-    padding: 0 4px 4px 4px;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
-    top: -8px;
-    border-bottom-width: 1px;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header {
-    border-bottom-width: 0;
-    padding: 4px;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed {
-    display: none;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer {
-    border: 0;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .right {
-    white-space: nowrap;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner {
-    word-break: break-all;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer,
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox,
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title {
-    grid-column: span 2;
-  }
+body.ttrss_main #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: #222;
+  grid-gap: 8px;
+  padding: 8px;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
+  background: #333;
+  border: 1px solid #222;
+  overflow: hidden;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
+  border-top-width: 0;
+  padding: 0 4px 4px 4px;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
+  top: -8px;
+  border-bottom-width: 1px;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header {
+  border-bottom-width: 0;
+  padding: 4px;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed {
+  display: none;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer {
+  border: 0;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .right {
+  white-space: nowrap;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner {
+  word-break: break-all;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title {
+  grid-column: 1 / -1;
 }
 body.ttrss_main #headlines-frame {
   padding: 0px;
diff --git a/themes/night_blue.css b/themes/night_blue.css
index dd3308cb0..fdbd3a4b8 100644
--- a/themes/night_blue.css
+++ b/themes/night_blue.css
@@ -648,49 +648,47 @@ body.ttrss_main #headlines-wrap-inner {
 body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
   display: none;
 }
-@media screen and (min-width: 1500px) {
-  body.ttrss_main #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: #222;
-    grid-gap: 8px;
-    padding: 8px;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header,
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
-    background: #333;
-    border: 1px solid #222;
-    overflow: hidden;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
-    border-top-width: 0;
-    padding: 0 4px 4px 4px;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
-    top: -8px;
-    border-bottom-width: 1px;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header {
-    border-bottom-width: 0;
-    padding: 4px;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed {
-    display: none;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer {
-    border: 0;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .right {
-    white-space: nowrap;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner {
-    word-break: break-all;
-  }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer,
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox,
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title {
-    grid-column: span 2;
-  }
+body.ttrss_main #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: #222;
+  grid-gap: 8px;
+  padding: 8px;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
+  background: #333;
+  border: 1px solid #222;
+  overflow: hidden;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
+  border-top-width: 0;
+  padding: 0 4px 4px 4px;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
+  top: -8px;
+  border-bottom-width: 1px;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header {
+  border-bottom-width: 0;
+  padding: 4px;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed {
+  display: none;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer {
+  border: 0;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .right {
+  white-space: nowrap;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner {
+  word-break: break-all;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title {
+  grid-column: 1 / -1;
 }
 body.ttrss_main #headlines-frame {
   padding: 0px;