Improve stylessheets formatting in UI code

[pmeier]

We recently merged #257 that introduced a helper function on how to define CSS class selectors in our Python code. We turned

ragna/ragna/deploy/_ui/central_view.py

Lines 296 to 328 in a437e7e

	stylesheets=[
	""" :host { width: 100%; }
	.pills_list {
	/*background-color:gold;*/
	display: grid;
	grid-auto-flow: row;
	row-gap: 10px;
	grid-template: repeat({{GRID_HEIGHT}}, 1fr) / repeat(3, 1fr);
	max-height: 200px;
	overflow: scroll;
	}
	.chat_document_pill {
	background-color: rgb(241,241,241);
	margin-left: 5px;
	margin-right: 5px;
	padding: 5px 15px;
	border-radius: 10px;
	color:var(--accent-color);
	width:fit-content;
	grid-column: span 1;
	}
	ul {
	list-style-type: none
	}
	""".replace(
	"{{GRID_HEIGHT}}", str(grid_height)
	)
	],

into

ragna/ragna/deploy/_ui/central_view.py

Lines 296 to 324 in 2056246

	stylesheets=ui.stylesheets(
	(":host", {"width": "100%"}),
	(
	".pills_list",
	{
	# "background-color": "gold",
	"display": "grid",
	"grid-auto-flow": "row",
	"row-gap": "10px",
	"grid-template": f"repeat({grid_height}, 1fr) / repeat(3, 1fr)",
	"max-height": "200px",
	"overflow": "scroll",
	},
	),
	(
	".chat_document_pill",
	{
	"background-color": "rgb(241,241,241)",
	"margin-left": "5px",
	"margin-right": "5px",
	"padding": "5px 15px",
	"border-radius": "10px",
	"color": "var(--accent-color)",
	"width": "fit-content",
	"grid-column": "span 1",
	},
	),
	("ul", {"list-style-type": "none"}),
	),

We need to apply this to all occurrences inside our UI code, i.e. https://github.com/Quansight/ragna/tree/main/ragna/deploy/_ui.

To do that replace split the large multiline string into the individual class selectors. For each class selector, define a two-tuple where the first item is the selector and the second item is a dictionary with the declarations. For example:

ragna/ragna/deploy/_ui/central_view.py

Lines 299 to 307 in a437e7e

	.pills_list {
	/*background-color:gold;*/
	display: grid;
	grid-auto-flow: row;
	row-gap: 10px;
	grid-template: repeat({{GRID_HEIGHT}}, 1fr) / repeat(3, 1fr);
	max-height: 200px;
	overflow: scroll;
	}

needs to be transformed into

ragna/ragna/deploy/_ui/central_view.py

Lines 298 to 309 in 2056246

	(
	".pills_list",
	{
	# "background-color": "gold",
	"display": "grid",
	"grid-auto-flow": "row",
	"row-gap": "10px",
	"grid-template": f"repeat({grid_height}, 1fr) / repeat(3, 1fr)",
	"max-height": "200px",
	"overflow": "scroll",
	},
	),

After you have done this for every class selector, pass all the tuples to the new stylesheets function.

Of course you can do this in a single PR, but doing this incrementally, i.e. one component at a time is also perfectly fine.