style(filters): set the filter clause in a monospace face, and shoot the editor panel

The panel shows a query, so set it in the monospace face the app already uses
for code-like content (SAS logs, cell text) rather than the UI font.

The spec now also captures the editor's panel - collapsed and expanded - since
the editor is where the clause was previously clamped with an ellipsis.

client/cypress/e2e/filter-panel.cy.ts

@@ -108,10 +108,14 @@ context('applied filter panel: ', function () {
     )
     assertClauseOverflowsCollapsedLine()
 
+    cy.screenshot('filter-panel-4-editor-collapsed', { capture: 'viewport' })
+
     cy.get('.infoBar-toggle').click()
     cy.get('.infoBar').should('have.class', 'expanded')
     assertClauseFullyVisible()
     assertClauseSpansSeveralLines()
+
+    cy.screenshot('filter-panel-4-editor-expanded', { capture: 'viewport' })
   })
 })
 

client/src/styles.scss

@@ -5433,6 +5433,9 @@ body[cds-theme='dark'] {
   text-align: center;
   padding: 3px 8px;
   font-size: 16px;
+  /* the panel shows a query, so set it in the monospace face the app already
+     uses for code-like content (SAS logs, cell text) */
+  font-family: 'Lucida Console', Monaco, monospace;
 
   .infoBar-text {
     flex: 1;