From 6204b73ba8b92b861feea920be950a4d55ebb8fe Mon Sep 17 00:00:00 2001
From: Edan Bainglass <edan.bainglass@gmail.com>
Date: Thu, 11 Jul 2024 06:50:07 +0000
Subject: [PATCH] Load CSS stylesheets in main notebook

---
 qe.ipynb                                      | 13 ++++++++++-
 src/aiidalab_qe/app/static/styles/README.md   | 23 +++++++++++++++++++
 src/aiidalab_qe/app/static/styles/custom.css  |  3 +++
 .../app/static/styles/scss/custom.scss        |  3 +++
 4 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 src/aiidalab_qe/app/static/styles/README.md
 create mode 100644 src/aiidalab_qe/app/static/styles/custom.css
 create mode 100644 src/aiidalab_qe/app/static/styles/scss/custom.scss

diff --git a/qe.ipynb b/qe.ipynb
index 6e47fbb4a..45cd0009e 100644
--- a/qe.ipynb
+++ b/qe.ipynb
@@ -24,6 +24,17 @@
     "load_profile(); # noqa: E402"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from aiidalab_widgets_base.utils.loaders import load_css_stylesheet\n",
+    "\n",
+    "load_css_stylesheet(package=\"aiidalab_qe.app.static.styles.css\")"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -50,7 +61,7 @@
     "from jinja2 import Environment\n",
     "\n",
     "from aiidalab_qe.app import App\n",
-    "from aiidalab_qe.app.static import templates, styles\n",
+    "from aiidalab_qe.app.static import styles, templates\n",
     "\n",
     "from aiidalab_qe.version import __version__"
    ]
diff --git a/src/aiidalab_qe/app/static/styles/README.md b/src/aiidalab_qe/app/static/styles/README.md
new file mode 100644
index 000000000..05eba23ce
--- /dev/null
+++ b/src/aiidalab_qe/app/static/styles/README.md
@@ -0,0 +1,23 @@
+# Stylesheets for the Quantum ESPRESSO app
+
+This folder contains two folders:
+
+- `scss` - a folder for SCSS-format stylesheets
+- `css`  - a folder serving as the compilation target for SCSS files
+
+It is recommended to add SCSS stylesheets in the SCSS folder for functionality and flexibility (see https://sass-lang.com/).
+
+Compiling SCSS into CSS (in the CSS folder) can be done using:
+
+- The [compile-hero](https://marketplace.visualstudio.com/items?itemName=Wscats.eno) extension, if using VS Code
+- The `sass` [CLI](https://sass-lang.com/install/)
+
+Stylesheets may be loaded directly from the CSS folder using
+
+```python
+from aiidalab_widgets_base.utils.loaders import load_css_stylesheet
+
+load_css_stylesheet(package="aiidalab_qe.app.static.styles.css", filename="<stylesheet-name>.css")
+```
+
+If `filename` is not provided, all CSS stylesheets will be loaded from the `css` package.
diff --git a/src/aiidalab_qe/app/static/styles/custom.css b/src/aiidalab_qe/app/static/styles/custom.css
new file mode 100644
index 000000000..876d68a98
--- /dev/null
+++ b/src/aiidalab_qe/app/static/styles/custom.css
@@ -0,0 +1,3 @@
+.output_subarea {
+  max-width: none !important;
+}
diff --git a/src/aiidalab_qe/app/static/styles/scss/custom.scss b/src/aiidalab_qe/app/static/styles/scss/custom.scss
new file mode 100644
index 000000000..876d68a98
--- /dev/null
+++ b/src/aiidalab_qe/app/static/styles/scss/custom.scss
@@ -0,0 +1,3 @@
+.output_subarea {
+  max-width: none !important;
+}