Made toggle button a button

cjmalloy · Dec 20, 2023 · b67d6bf · b67d6bf
1 parent 2ad3883
commit b67d6bf
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 13 deletions.
diff --git a/src/app/component/ref/ref.component.html b/src/app/component/ref/ref.component.html
@@ -28,17 +28,18 @@
       <span class="host">({{ host }})</span>
     </div>
     <div class="link-below">
-      <div class="toggle"
-           *ngIf="showToggle && (thread || commentNoTitle || expandPlugins.length)"
-           (click)="editing ? editing = false : viewSource ? viewSource = false : store.local.setRefToggled(ref.url, ref.origin, expanded = !expanded)">
+      <button *ngIf="showToggle && (thread || commentNoTitle || expandPlugins.length)"
+              type="button"
+              class="toggle"
+              (click)="editing ? editing = false : viewSource ? viewSource = false : store.local.setRefToggled(ref.url, ref.origin, expanded = !expanded)">
         <ng-container *ngIf="(editing || viewSource || expanded) else toggleExpanded">
           <span class="toggle-x">✕</span>
         </ng-container>
         <ng-template #toggleExpanded>
           <span class="toggle-plus" *ngIf="!fullscreen">＋</span>
           <span class="toggle-fullscreen" *ngIf="fullscreen">⛶</span>
         </ng-template>
-      </div>
+      </button>
       <div class="stack">
         <div class="info" [class.expanded]="!actionsExpanded">
           <ng-container *ngIf="ref.created else notSubmitted">

diff --git a/src/theme/common.scss b/src/theme/common.scss
@@ -1234,6 +1234,7 @@ formly-field-radio, formly-field-multicheckbox {
 }
 
 .toggle {
+  display: block;
   clear: both;
   margin: 4px 8px 4px 2px;
   flex-shrink: 0;
@@ -1243,15 +1244,9 @@ formly-field-radio, formly-field-multicheckbox {
   text-align: center;
   line-height: 24px;
   cursor: pointer;
-
-  .toggle-plus {
-    position: relative;
-    top: 1px;
-  }
-  .toggle-x {
-    position: relative;
-    top: 1px;
-  }
+  border: none;
+  font-size: 18px;
+  padding: 0;
 
   &.actions-toggle {
     margin: 4px 0 4px 8px;