add swiper view to show

src/app/widget-modules/components/card/card.component.html

@@ -1,13 +1,13 @@
-<div [class.padding]="padding" class="card">
+<div [class.fullscreen]="fullscreen" [class.padding]="padding" class="card">
   <button
-    *ngIf="closeLink"
+    *ngIf="closeLink && !fullscreen"
     [routerLink]="closeLink"
     class="btn-close"
     mat-icon-button
   >
     <fa-icon [icon]="closeIcon"></fa-icon>
   </button>
-  <div *ngIf="heading" class="heading">{{ heading }}</div>
-  <div *ngIf="subheading" class="subheading">{{ subheading }}</div>
+  <div *ngIf="heading && !fullscreen" class="heading">{{ heading }}</div>
+  <div *ngIf="subheading && !fullscreen" class="subheading">{{ subheading }}</div>
   <ng-content></ng-content>
 </div>

src/app/widget-modules/components/card/card.component.less

@@ -23,6 +23,20 @@
   }
 
   box-sizing: border-box;
+
+  &.fullscreen {
+    border-radius: 0;
+    background: #ffff;
+    margin: 0;
+    color: #000;
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: unset;
+    z-index: 10;
+  }
 }
 
 .heading {

src/app/widget-modules/components/card/card.component.ts

@@ -12,4 +12,5 @@ export class CardComponent {
   @Input() public subheading: string | null = null;
   @Input() public closeLink: string | null = null;
   @Input() public closeIcon = faTimes;
+  @Input() public fullscreen = false;
 }

src/app/widget-modules/components/song-text/song-text.component.less

@@ -45,9 +45,7 @@
   @media screen and (max-width: 860px) {
     margin-bottom: 10px;
   }
-  border-left: 3px solid #0002;
-  padding-left: 5px;
-  margin-left: -8px;
+
 }
 
 .chorus {