combined mode: use flex-box for header/footer layout

themes/night.css

@@ -1040,46 +1040,28 @@ body.ttrss_main .dijitDialog h4:first-of-type {
 }
 .cdm .header,
 .cdm .footer {
-  display: table;
-}
-.cdm .header img,
-.cdm .header input,
-.cdm .footer img {
-  vertical-align: middle;
-}
-.cdm .header > div,
-.cdm .footer > div {
-  white-space: nowrap;
-}
-.cdm .header > span,
-.cdm .footer > span.left {
-  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
 }
 .cdm .header img,
 .cdm .footer img {
   margin: 0px 4px;
+  vertical-align: middle;
 }
 .cdm .header > * {
-  display: table-cell;
+  align-self: center;
   padding: 5px;
+  white-space: nowrap;
+}
+.cdm .header .titleWrap {
+  flex-grow: 2;
 }
 .cdm .header span.updated {
   color: #555555;
   font-weight: normal;
   font-size: 11px;
   white-space: nowrap;
-  vertical-align: middle;
-}
-.cdm .header input {
-  margin-right: 5px;
-}
-.cdm .header div.updPic {
-  width: 25px;
-  display: inline-block;
-  text-align: center;
-}
-.cdm .header div.updPic img {
-  vertical-align: middle;
 }
 .cdm .header input {
   margin-left: 4px;
@@ -1093,8 +1075,10 @@ body.ttrss_main .dijitDialog h4:first-of-type {
   clear: both;
 }
 .cdm .footer > * {
-  display: table-cell;
-  vertical-align: middle;
+  align-self: center;
+}
+.cdm .footer .left {
+  flex-grow: 2;
 }
 .cdm .intermediate {
   margin: 10px;
@@ -1332,7 +1316,6 @@ div#floatingTitle.Unread a.title {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  max-width: 500px;
 }
 .cdm.expandable .excerpt {
   white-space: nowrap;