new migration in apps.dashboard for Applet grid_cols & grid_rows settings; test_models; complete overhaul of _dashboard.scss to containerize user scrolling; some new styling in _base.scss supports static window behind localized scrolling; new applet mgmt in apps.dashboard.admin; .views passes page_dashboard to home_page() FBV; keep an eye on IT apps.dashboard.tests.integrated.test_views.NewListTest.test_for_invalid_input_renders_list_template for intermittent caching errors

src/apps/dashboard/admin.py

@@ -1,3 +1,11 @@
 from django.contrib import admin
 
-# Register your models here.
+from apps.dashboard.models import Applet, UserApplet
+
+
+@admin.register(Applet)
+class AppletAdmin(admin.ModelAdmin):
+    list_display = ['slug', 'name', 'default_visible', 'grid_cols', 'grid_rows']
+    list_editable = ['grid_cols', 'grid_rows']
+
+admin.site.register(UserApplet)

src/apps/dashboard/migrations/0004_applet_grid_cols_applet_grid_rows.py

@@ -0,0 +1,23 @@
+# Generated by Django 6.0 on 2026-03-06 22:29
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('dashboard', '0003_seed_applets'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='applet',
+            name='grid_cols',
+            field=models.PositiveSmallIntegerField(default=12),
+        ),
+        migrations.AddField(
+            model_name='applet',
+            name='grid_rows',
+            field=models.PositiveSmallIntegerField(default=3),
+        ),
+    ]

src/apps/dashboard/models.py

@@ -42,6 +42,8 @@ class Applet(models.Model):
     slug = models.SlugField(unique=True)
     name = models.CharField(max_length=100)
     default_visible = models.BooleanField(default=True)
+    grid_cols = models.PositiveSmallIntegerField(default=12)
+    grid_rows = models.PositiveSmallIntegerField(default=3)
 
     def __str__(self):
         return self.name

src/apps/dashboard/tests/integrated/test_models.py

@@ -70,15 +70,25 @@ class ListModelTest(TestCase):
             self.assertEqual(list_.name, "first item")
 
 class AppletModelTest(TestCase):
+    def setUp(self):
+        self.applet = Applet.objects.create(
+            slug="my-applet", name="My Applet", default_visible=True
+        )
+
     def test_applet_can_be_created(self):
-        applet = Applet.objects.create(slug="my-applet", name="My Applet", default_visible=True)
+        self.assertEqual(Applet.objects.get(slug="my-applet"), self.applet)
-        self.assertEqual(Applet.objects.get(slug="my-applet"), applet)
 
     def test_applet_slug_is_unique(self):
-        Applet.objects.create(slug="my-applet", name="First")
         with self.assertRaises(IntegrityError):
             Applet.objects.create(slug="my-applet", name="Second")
 
+    def test_applet_str(self):
+        self.assertEqual(str(self.applet), "My Applet")
+
+    def test_applet_grid_defaults(self):
+        self.assertEqual(self.applet.grid_cols, 12)
+        self.assertEqual(self.applet.grid_rows, 3)
+
 class UserAppletModelTest(TestCase):
     def setUp(self):
         self.user = User.objects.create(email="a@b.cde")

src/apps/dashboard/views.py

@@ -24,7 +24,7 @@ def _applet_context(user):
     ]
 
 def home_page(request):
-    context = {"form": ItemForm(), "palettes": PALETTES}
+    context = {"form": ItemForm(), "palettes": PALETTES, "page_class": "page-dashboard"}
     if request.user.is_authenticated:
         context["applets"] = _applet_context(request.user)
     return render(request, "apps/dashboard/home.html", context)

src/static_src/scss/_base.scss

@@ -1,8 +1,10 @@
 body {
+    display: flex;
+    flex-direction: column;
     background-color: rgba(var(--priUser), 1);
     color: rgba(var(--secUser), 1);
     font-family: Georgia, serif;
-    min-height: 100vh;
+    height: 100vh;
 
     a {
         text-decoration: none;

src/static_src/scss/_dashboard.scss

@@ -1,21 +1,64 @@
-#id_applets_container {
+body.page-dashboard {
-    overflow-y: auto;
+    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding: 0.5rem 0;
 
-    section {
+    .container {
-        border: 0.2rem solid rgba(var(--secUser), 0.5);
+        overflow: hidden;
-        border-radius: 0.75rem;
+    }
-        padding: 1rem;
+
+    .row {
+        flex-shrink: 0;
     }
 }
 
+#id_dash_content {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
 #id_dash_gear {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    z-index: 1;
     background: none;
     border: none;
     font-size: 1.5rem;
     cursor: pointer;
     color: rgba(var(--secUser), 0.6);
 }
+
+#id_applet_menu {
+    position: absolute;
+    top: 3rem;
+    right: 0.5rem;
+    z-index: 100;
+    background-color: rgba(var(--priUser), 0.95);
+    border: 0.15rem solid rgba(var(--secUser), 0.5);
+    border-radius: 0.75rem;
+    padding: 1rem;
+}
+
+#id_applets_container {
+    container-type: inline-size;
+    --grid-gap: 0.5rem;
+
+    flex: 1;
+    overflow-y: auto;
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-auto-rows: calc((100cqw - 11 * var(--grid-gap)) / 12);
+    gap: var(--grid-gap);
+    padding: 0.75rem;
+
+    section {
+        border: 0.2rem solid rgba(var(--secUser), 0.5);
+        border-radius: 0.75rem;
+        padding: 1rem;
+        overflow: hidden;
+        grid-column: span var(--applet-cols, 12);
+        grid-row: span var(--applet-rows, 3);
+    }
+}

src/templates/apps/dashboard/_partials/_applets.html

@@ -25,7 +25,10 @@
     {% for entry in applets %}
         {% if entry.visible %}
             {% if entry.applet.slug == "username" %}
-                <section id="id_applet_username">
+                <section
+                    id="id_applet_username"
+                    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
+                >
                     <h1>{{ user|display_name }}</h1>
                     <div class="form-container">
                         <form method="POST" action="{% url "set_profile" %}">
@@ -40,7 +43,11 @@
                     </div>
                 </section>
             {% elif entry.applet.slug == "palette" %}
-                <section id="id_applet_palette" class="palette">
+                <section
+                    id="id_applet_palette"
+                    class="palette"
+                    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
+                >
                     {% for palette in palettes %}
                         <div class="palette-item">
                             <div class="swatch {{ palette.name }}{% if user_palette == palette.name %} active{% endif %}{% if palette.locked %} locked{% endif %}"></div>

src/templates/apps/dashboard/home.html

@@ -15,6 +15,7 @@
 
 {% block content %}
     {% if user.is_authenticated %}
+        <div id="id_dash_content">
             <button
             id="id_dash_gear"
             onclick="document.getElementById('id_applet_menu').style.display='block'"
@@ -22,5 +23,6 @@
                 &#9881;
             </button>
             {% include "apps/dashboard/_partials/_applets.html" %}
+        </div>
     {% endif %}
 {% endblock content %}

src/templates/core/base.html

@@ -16,7 +16,7 @@
         {% endcompress %}
     </head>
 
-    <body class="{{ user_palette }}">
+    <body class="{{ user_palette }} {{ page_class|default:'' }}">
         <div class="container">
             <nav class="navbar">
                 <div class="container-fluid">