flex kw

app/css/cyp.less

@@ -9,12 +9,12 @@ body {
 }
 
 main {
-	flex-grow: 1;
+	flex: auto;
 	overflow: auto;
 }
 
 header, footer {
-	flex-shrink: 0;
+	flex: none;
 	z-index: 1;
 	box-shadow: var(--box-shadow);
 }
@@ -38,9 +38,11 @@ button {
 	-moz-appearance: none;
 	appearance: none;
 
-	.flex-row;
-	display: inline-flex;
-	flex-shrink: 0;
+	&:not([hidden]) { display: flex; }
+	flex-direction: row;
+	align-items: center;
+
+	flex: none;
 
 	background-color: transparent;
 	padding: 0;

app/css/elements/song.less

@@ -1,16 +1,13 @@
 cyp-song {
 	.item;
 
-	.info {
-		flex-grow: 1;
-		min-width: 0; // bez tohoto se odmita zmensit
+	.multiline {
 		.flex-column;
+		min-width: 0; // bez tohoto se odmita zmensit
 
 		/* FIXME toto je relikt z .component
 		.icon {
 			color: var(--primary);
-			margin-right: var(--icon-spacing);
-			filter: drop-shadow(var(--text-shadow));
 		}
 		*/
 

app/css/mixins.less

@@ -44,15 +44,20 @@
 	}
 
 	> .icon {
+		flex: none;
 		margin-right: var(--icon-spacing);
 		filter: drop-shadow(var(--text-shadow));
 	}
 
 	.title {
 		font-size: var(--font-size-large);
-		flex-grow: 1;
-		min-width: 0; // bez tohoto se odmita zmensit
+		min-width: 0;
+		.ellipsis;
+	}
+
+	button {
+		&:first-of-type { margin-left: auto; }
+		.icon { width: 32px; }
 	}
 
-	button .icon { width: 32px; }
 }

app/js/elements/song.js

@@ -10,12 +10,12 @@ export default class Song extends Item {
 	}
 
 	connectedCallback() {
-		let info = html.node("div", {className:"info"}, "", this);
+		let block = html.node("div", {className:"multiline"}, "", this);
 
 		let lines = formatSongInfo(this.data);
-		info.appendChild(this._buildTitle(lines.shift()));
+		block.appendChild(this._buildTitle(lines.shift()));
 
-		lines.length && html.node("span", {className:"subtitle"}, lines.shift(), info);
+		lines.length && html.node("span", {className:"subtitle"}, lines.shift(), block);
 	}
 }