css: sidebar: adjust height of style sidebar

allows to automatically adjust height of list/tree of styles
and show scrollbar if needed, before we showed full list and
main scrollbar of sidebar, so checkbox at the end was invisible

Signed-off-by: Szymon Kłos <szymon.klos@collabora.com>
Change-Id: I564ddacb1ae8d9274e826dbcd83260344a400668

browser/css/jsdialogs.css

@@ -214,8 +214,11 @@ td.jsdialog > [id^='table-box']:not(.sidebar) {
 	/* don't occupy space showing empty area */
 	width: 0px !important;
 	height: 0px !important;
+	min-width: 0px !important;
+	min-height: 0px !important;
 	margin: 0px !important;
 	padding: 0px !important;
+	flex-grow: initial !important;
 }
 
 /* Page number dialog placed under Insert menu */

browser/css/jssidebar.css

@@ -7,7 +7,6 @@
 }
 
 div.ui-grid-cell.sidebar.jsdialog {
-	display: inline-grid;
 	row-gap: 5px;
 }
 
@@ -378,7 +377,40 @@ span.jsdialog.sidebar.ui-treeview-notexpandable {
 	visibility: hidden;
 }
 
-/* Styles Deck */
 #StyleListPanelPanelExpander #TemplatePanel #filter select {
 	width: 100%;
 }
+
+/* required to dynamically resize treeviews or lists inside sidebar */
+.sidebar-container,
+.sidebar-container > .root-container.jsdialog.sidebar,
+.sidebar-container > .root-container.jsdialog.sidebar > .vertical.jsdialog.sidebar {
+	height: 100%;
+}
+
+#StyleListDeck,
+#StyleListDeck .root-container.jsdialog.sidebar,
+#StyleListDeck .vertical.jsdialog.sidebar,
+#StyleListPanelPanelExpander,
+#StyleListPanelPanelExpander #content,
+#StyleListPanelPanelExpander #TemplatePanel {
+	height: 100%;
+}
+
+#StyleListPanelPanelExpander .ui-expander-content.jsdialog.sidebar.expanded {
+	height: calc(100% - 45px);
+}
+
+#TemplatePanel {
+	display: flex;
+	flex-direction: column;
+}
+
+#TemplatePanel > div {
+	flex-grow: 0;
+}
+
+#TemplatePanel > div:nth-child(3),
+#TemplatePanel > div:nth-child(4) {
+	flex-grow: 1;
+}