search

cmd-ntrf / jupyter-lmod

Jupyter plugin that provides a tab for TACC Lmod (https://github.com/TACC/Lmod)
MIT License
28 stars 13 forks source link

Cannot scroll modules with new CSS #59

Closed mahendrapaipuri closed 1 year ago

mahendrapaipuri commented 1 year ago

This PR eliminates the dependencies of CSS on other extensions of jupyter eco system and defines its own styles. Seems like (at least in my tests), the scrolling behaviour of modules is broken with new CSS. By inspecting, I figured out that this commit might be the culprint. The class lm-CommandPalette-content inherits more CSS from lumino widgets that adds overflow which is not anymore the case with new CSS.

I think we need to add overflow in jp-Lmod-content class?

cmd-ntrf commented 1 year ago

You are right and I was able to reproduce.

When I inspect the CSS in browser, I find this in commandpalette.css

/* <DEPRECATED> */
.p-CommandPalette-content, /* </DEPRECATED> */
.lm-CommandPalette-content {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  min-height: 0;
  overflow: auto;
  list-style-type: none;
}

But I am having a hard time finding this CSS code back in jupyterlab repo.

mahendrapaipuri commented 1 year ago

But I am having a hard time finding this CSS code back in jupyterlab repo.

That is being inherited from lumino widgets.

cmd-ntrf commented 1 year ago

Gotcha, CSS is definitely not my forte.

Is there a way to keep the inheritance from the lumino widget or should we copy the lines missing over to jupyter-lmod css file?

mahendrapaipuri commented 1 year ago

Gotcha, CSS is definitely not my forte.

Mine neither to be honest. Not a big fan of whole front end thingy!!

I guess something like this might work:

.lm-CommandPalette-content jp-Lmod-content {
  <directives>
}

Effectively, we are saying .lm-CommandPalette-content is parent to jp-Lmod-content?

mahendrapaipuri commented 1 year ago 
.lm-CommandPalette-content jp-Lmod-content {
  <directives>
}

This didnt work, I checked. No idea how the magic of less works.

What we can do is to add lm-CommandPalette-content to the class here directly?

cmd-ntrf commented 1 year ago

Sorry I forgot to update you. I ended up copying the missing content directly when I could not make inheritance work either. https://github.com/cmd-ntrf/jupyter-lmod/commit/5453398fba2781a659a0e52d98fc1c1419ca1baa

I am hopeful that we will be able to simplify the extension TypeScript when JupyterLab 4 is released. JL4 will provide a TypeScript widget that define a complete sidebar pane just like we did for jupyterlab-lmod - SidePanel https://github.com/jupyterlab/jupyterlab/blob/master/packages/ui-components/src/components/sidepanel.ts

That help us getting rid of most of the CSS definition.