Fix CSS issue in theme switcher in Fast List (and other templates)?

[Coderambling]

On the Holoviz Discord, @ATL2001 made a cool dashboard and pointed out an issue with the CSS of the theme switcher. When using the FastList template, the symbol icon for the light / dark switcher does not line up properly.

I am not aware of this issues affecting other templates, but I am not ruling it out.

Additional comments by @ahuang11 regarding the bug can be found here:

https://discord.com/channels/1075331058024861767/1088148883655364698/1329835947113582683

The initial goal of this issue is to document the issue and his solution.

https://discord.com/channels/1075331058024861767/1088148883655364698/1331385218795569218

https://discord.com/channels/1075331058024861767/1088148883655364698/1329577531032080455

His app is here: https://huggingface.co/spaces/ATL2001/hiking_club

The app uses the Fast List template.

He fixed the issue in has app by adding the CSS below to app.py and adding it as raw_css to the template.

CSS = """
.theme-toggle-icon {
display: inline-block;
}

template = pn.template.FastListTemplate(
title="Pack 75 Hiking Club",
sidebar=[
total_distance_indicator,
clear_button,
den_selector,
scout_selector,
hike_selector,
], raw_css=[CSS]
)

The CSS for the Fast List Template seems to be here:

https://github.com/holoviz/panel/blob/fee6d73c2b8092838e455349ff6d1512c77c5013/panel/template/fast/fast.css

It is located in the fast subfolder of

https://github.com/holoviz/panel/tree/fee6d73c2b8092838e455349ff6d1512c77c5013/panel/template

It currently has this CSS:

.theme-toggle-icon {
height: 25px;
width: 25px;
margin-top: 5px;
}

Other CSS files for templates in / templates the folder above do not seem to have a reference to .theme-toggle-icon

There is a another dir with CSS here that seems related to themes / templates:

https://github.com/holoviz/panel/tree/fee6d73c2b8092838e455349ff6d1512c77c5013/panel/theme/css

There seems to be no references to .theme-toggle-icon in there, but I am not sure how the light / dark switching is implemented.

[ATL2001]

Thanks for writing this up! I haven't had any time to dig into it yet to see if I can find out what was causing the theme switcher to get offset.

I looked into the possibility of it being caused by the extensions, but ruled that out by removing them (and their respective components). perhaps it's something from the lonboard map or the great tables table that's setting something in the CSS causing it to line up (I have absolutely nothing to back that up... just random ideas). hopefully I'll get some time free to dig in further at some point, but I'm not sure when that will be.

[Coderambling]

Thanks for writing this up! I haven't had any time to dig into it yet to see if I can find out what was causing the theme switcher to get offset.

I looked into the possibility of it being caused by the extensions, but ruled that out by removing them (and their respective components). perhaps it's something from the lonboard map or the great tables table that's setting something in the CSS causing it to line up (I have absolutely nothing to back that up... just random ideas). hopefully I'll get some time free to dig in further at some point, but I'm not sure when that will be.

Sure! Thanks for the context. Would be good to have additional confirmation of the bug occurring (in other apps) or have an MVP to show it occuring with as little code as possible.