Fix disappearing display controls in Sequence Salience.

iftenney · LIT team · commit 309c4f283af5 · 2024-03-15T20:25:50.000-07:00
Left-side toolbar controls were one long non-wrapping block, so if the module
was narrow enough these would clip. This splits them into two blocks, allowing
them to wrap, and adds a spacer to maintain the intended positioning.

PiperOrigin-RevId: 616319869
diff --git a/lit_nlp/client/modules/lm_salience_module.css b/lit_nlp/client/modules/lm_salience_module.css
@@ -133,6 +133,11 @@ select:invalid {
   margin-right: 8px;
 }
 
+.flex-grow-spacer {
+  flex: 1;
+  margin: 0;
+}
+
 #change-target-button {
   white-space: nowrap;
   margin: 0; /* have enough already from controls-group */
@@ -173,13 +178,13 @@ select:invalid {
  * Helps in SxS mode when the module is replicated.
  */
 @container (width < 720px) {
-  #granularity-label {
+  #method-label {
     display: none;
   }
 }
 
 @container (width < 660px) {
-  #change-target-button, #method-label, #colormap-slider-label {
+  #change-target-button, #granularity-label, #colormap-slider-label {
     display: none;
   }
 
diff --git a/lit_nlp/client/modules/lm_salience_module.ts b/lit_nlp/client/modules/lm_salience_module.ts
@@ -598,6 +598,8 @@ export class LMSalienceModule extends SingleExampleSingleModelModule {
             .options=${segmentationOptions}
             ?disabled=${this.currentTokens.length === 0}>
         </lit-fused-button-bar>
+      </div>
+      <div class="controls-group" style="gap: 8px;">
         <lit-switch
           ?selected=${!this.denseView}
           @change=${onClickToggleDensity}>
@@ -620,6 +622,7 @@ export class LMSalienceModule extends SingleExampleSingleModelModule {
             ${this.underline ? 'font_download' : 'format_color_text'}
         </mwc-icon>
       </div>
+      <div class='flex-grow-spacer'></div>
     `;
   }
 

Original file line number	Diff line number	Diff line change
`@@ -133,6 +133,11 @@ select:invalid {`
`133`	`133`	`margin-right: 8px;`
`134`	`134`	`}`
`135`	`135`
	`136`	`+.flex-grow-spacer {`
	`137`	`+ flex: 1;`
	`138`	`+ margin: 0;`
	`139`	`+}`
	`140`	`+`
`136`	`141`	`#change-target-button {`
`137`	`142`	`white-space: nowrap;`
`138`	`143`	`margin: 0; /* have enough already from controls-group */`
`@@ -173,13 +178,13 @@ select:invalid {`
`173`	`178`	`* Helps in SxS mode when the module is replicated.`
`174`	`179`	`*/`
`175`	`180`	`@container (width < 720px) {`
`176`		`- #granularity-label {`
	`181`	`+ #method-label {`
`177`	`182`	`display: none;`
`178`	`183`	`}`
`179`	`184`	`}`
`180`	`185`
`181`	`186`	`@container (width < 660px) {`
`182`		`- #change-target-button, #method-label, #colormap-slider-label {`
	`187`	`+ #change-target-button, #granularity-label, #colormap-slider-label {`
`183`	`188`	`display: none;`
`184`	`189`	`}`
`185`	`190`