Show on Card and Show on Minicard: no heading row saying the title again.

The heading row named the columns of a ROW - "Show on Card" over the checkbox and
"Description" over the setting's name - which is what they labelled, but not what
they looked like. Since the rows flow into as many columns as the window fits,
the two headings sat above the FIRST of three or four columns and read as if they
named those: "Show on Card" over one column of settings and "Description" over
another, when both columns are the same kind of row.

The first heading also said what the popup's own title says. Show on Card opens a
popup titled "Show on Card" and then repeated it a line below; the same for Show
on Minicard.

Both are gone, and the two-pixel rule under them with them - one more line across
a popup that is a list of lines. A row is a checkbox and the name of a setting,
which needs no heading over it. One template serves both popups, so both lose it
together, and the sticky positioning, background and z-index that existed only to
keep those headings visible while the rows scrolled go too.

tests/showOnCardMenus.test.cjs pinned the heading row's full-width span; it now
pins the opposite, with the reason, and adds that the popup does not print its own
title twice.

Thanks to xet7 !

client/components/sidebar/sidebar.css

@@ -110,22 +110,8 @@
   transform-origin: 100% 100% !important;
 }
 
-/* Card Settings 3-column grid layout */
-.card-settings-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr 2fr;
-  gap: 10px;
-  margin-bottom: 10px;
-  /* Keep the "Show on Card / Show on Minicard / Description" titles visible
-     while the rows below scroll (the popup scrolls in .pop-over .content-wrapper). */
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  background: #fff;
-  padding: 5px 0;
-  border-bottom: 2px solid #ddd;
-}
-
+/* Card Settings 3-column row layout. There is no heading row above these: see
+   the note on boardCardSettingsPopup in sidebar.jade. */
 .card-settings-row {
   display: grid;
   grid-template-columns: 1fr 1fr 2fr;
@@ -140,9 +126,7 @@
    hidden here, so there is still ONE list of settings and one set of handlers.
    A hidden grid item takes no track, so the two that remain fill the two
    columns declared below. client/components/sidebar/sidebar.jade */
-.board-card-settings.show-card-only .card-settings-grid,
 .board-card-settings.show-card-only .card-settings-row,
-.board-card-settings.show-minicard-only .card-settings-grid,
 .board-card-settings.show-minicard-only .card-settings-row {
   grid-template-columns: 1fr 2fr;
 }
@@ -165,13 +149,6 @@
     column-gap: 18px;
     align-items: start;
   }
-
-  /* The headings stay one row across the whole width: they name the columns of
-     a ROW ("Show on Card", "Description"), not of this outer grid. */
-  .board-card-settings.show-card-only .card-settings-grid,
-  .board-card-settings.show-minicard-only .card-settings-grid {
-    grid-column: 1 / -1;
-  }
 }
 
 /* "Labels text" is the user's own setting, not the board's: it shows in the
@@ -191,9 +168,7 @@
   display: none;
 }
 
-.board-card-settings.show-card-only .card-settings-grid > .card-settings-column:nth-child(2),
 .board-card-settings.show-card-only .card-settings-row > .card-settings-column:nth-child(2),
-.board-card-settings.show-minicard-only .card-settings-grid > .card-settings-column:nth-child(1),
 .board-card-settings.show-minicard-only .card-settings-row > .card-settings-column:nth-child(1) {
   display: none;
 }

client/components/sidebar/sidebar.jade

@@ -282,15 +282,15 @@ template(name="showOnMinicardPopup")
   else
     +boardCardSettingsPopup(side="minicard" personalOnly=true card=this)
 
+//- No heading row. It used to name the columns of a ROW - "Show on Card" over
+  the checkbox and "Description" over the name - which is what they label, but
+  not what they LOOK like: the rows flow into as many columns as the window
+  fits, so two headings sat above the first of three or four columns and read as
+  if they named those. The first of them also repeated the popup's own title,
+  which is "Show on Card" or "Show on Minicard" already. A row is a checkbox and
+  the name of a setting, and needs neither.
 template(name="boardCardSettingsPopup")
   form.board-card-settings(class=settingsSideClass)
-    .card-settings-grid
-      .card-settings-column
-        h4 {{_ 'show-on-card'}}
-      .card-settings-column
-        h4 {{_ 'show-on-minicard'}}
-      .card-settings-column
-        h4 {{_ 'description'}}
     //- "List title": the name of the LIST this card is in, on its minicard.
       A per-CARD setting, unchecked by default, and the first row of this
       column because it is about the card as a whole rather than one of its

tests/showOnCardMenus.test.cjs

@@ -313,11 +313,19 @@ test('the two popups are wide, and lay their rows out in columns', () => {
   assert.ok(/align-items: start/.test(body), 'and the rows sit at the top of their cells');
 });
 
-test('the headings stay one row across the columns (negative)', () => {
-  // They name the columns of a ROW - "Show on Card", "Description" - not of the
-  // outer grid, so a heading in the second column would label nothing.
-  assert.ok(/show-minicard-only \.card-settings-grid \{\n\s+grid-column: 1 \/ -1/
-    .test(sidebarCss), 'the heading row spans the whole width');
+test('there is no heading row over the columns (negative)', () => {
+  // There used to be one, naming the columns of a ROW: "Show on Card" over the
+  // checkbox and "Description" over the name. That is what they labelled, but
+  // not what they looked like - the rows flow into as many columns as the window
+  // fits, so the two headings sat above the FIRST of three or four columns and
+  // read as if they named those. The first also repeated the popup's own title,
+  // which is "Show on Card" or "Show on Minicard" already. A row is a checkbox
+  // and the name of a setting; it needs no heading, and the rule under one is
+  // one more line across a popup that is a list of lines.
+  assert.ok(!/card-settings-grid/.test(sidebarCss), 'no heading-row CSS is left');
+  assert.ok(!/card-settings-grid/.test(sidebarJade), 'and no heading row in the markup');
+  assert.ok(!/h4 \{\{_ 'show-on-card'\}\}/.test(sidebarJade),
+    'so the popup does not say its own title twice');
   // Desktop only: below 800px every popup is a full-screen sheet and one column
   // is the right answer.
   const at = sidebarCss.lastIndexOf('@media', sidebarCss.indexOf('.board-card-settings.show-card-only,'));