minor mobile fixes (#493)

* aligned editor with cards on mobile, reduced height of editor and cards on mobile, fixed the underline on typo card

* prettier

* update margins

---------

Co-authored-by: Andi Braimllari <>

cypress/e2e/general-flows.cy.js

@@ -31,12 +31,12 @@ describe("general flows", () => {
 
     it("should mark typos in the editor", () => {
         cy.get('[data-test="editor"]').type("gabmim ");
-        cy.get('.typo').should("be.visible");
+        cy.get(".typo").should("be.visible");
     });
 
     it("should mark loanwords in the editor", () => {
         cy.get('[data-test="editor"]').type("lider ");
-        cy.get('.loanword').should("be.visible");
+        cy.get(".loanword").should("be.visible");
     });
 
     it("should open and close the side menu as expected", () => {
@@ -207,26 +207,20 @@ describe("general flows", () => {
             .find('[data-test="blur-marking-button"]')
             .click();
         cy.get(".typo").first().click();
-        cy.get(".typo")
-            .should("have.length", 3)
-            .should("be.visible");
+        cy.get(".typo").should("have.length", 3).should("be.visible");
 
         cy.get('[data-test="marking-card"]')
             .find('[data-test="suggestion"]')
             .first()
             .click();
         cy.get(".typo").first().click();
-        cy.get(".typo")
-            .should("have.length", 2)
-            .should("be.visible");
+        cy.get(".typo").should("have.length", 2).should("be.visible");
 
         cy.get('[data-test="marking-card"]')
             .find('[data-test="suggestion"]')
             .first()
             .click();
-        cy.get(".typo")
-            .should("have.length", 1)
-            .should("be.visible");
+        cy.get(".typo").should("have.length", 1).should("be.visible");
 
         cy.get('[data-test="marking-card"]')
             .find('[data-test="dismiss-marking-button"]')

src/app/header/header.component.html

@@ -7,7 +7,7 @@
     >
         <div class="header-name-gear-icon">
             <button
-                id='off-canvas-start-button'
+                id="off-canvas-start-button"
                 class="off-canvas-start-button"
                 [ngClass]="{
                     'header-button-dark-mode': darkModeService.isDarkMode

src/app/home/home.component.css

@@ -8,6 +8,7 @@
 .input-container {
     flex: 0 0 62%;
     margin-left: 3rem;
+    margin-top: 3rem;
 }
 
 .typo-marking-card-header {
@@ -126,6 +127,7 @@
 .output-container {
     flex: 0 0 30%;
     margin-right: 3rem;
+    margin-top: 3rem;
     /*padding-right: 25px;*/
     overflow-x: hidden;
     overflow-y: visible;
@@ -345,8 +347,8 @@
 
 .dismiss-marking-element-dark-mode {
     background: transparent
-    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
-    center/1em auto no-repeat;
+        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
+        center/1em auto no-repeat;
 }
 
 .close-button-text-reset {
@@ -749,11 +751,14 @@ input:checked + .slider:before {
     }
 
     .input-container {
+        margin-top: 0;
         margin-right: 3rem;
     }
 
     .output-container {
-        margin-left: 3rem;
+        margin-top: 0;
+        margin-left: 2.7rem;
+        margin-right: 2.7rem;
     }
 }
 

src/app/home/home.component.html

@@ -1,5 +1,5 @@
 <div class="high-level-container">
-    <div class="input-container mt-5">
+    <div class="input-container">
         <div
             class="card input-container-card border-secondary"
             [ngClass]="{
@@ -29,7 +29,7 @@
                         spellcheck="false"
                         autocapitalize="off"
                         role="textbox"
-                        aria-label='redaktori'
+                        aria-label="redaktori"
                         aria-multiline="true"
                         data-test="editor"
                     ></div>
@@ -141,7 +141,7 @@
             />
         </div>
     </div>
-    <div class="output-container mt-5">
+    <div class="output-container">
         <div
             *ngIf="
                 (processedText === undefined ||
@@ -152,7 +152,7 @@
             <!-- TODO put into a method -->
             <div class="card typo-marking-card border-secondary">
                 <div
-                    class="card-header second-header"
+                    class="card-header typo-marking-card-header second-header"
                     [ngClass]="{
                         'second-header-dark-mode': darkModeService.isDarkMode
                     }"
@@ -626,7 +626,7 @@ <h5 id="writingsHistoryModalLabel" class="modal-title">
                     <label
                         class="form-check-label"
                         for="flex-switch-check-checked"
-                    >Përdor Historikun e Shkrimeve</label
+                        >Përdor Historikun e Shkrimeve</label
                     >
                     <label class="switch">
                         <input

src/app/home/home.component.ts

@@ -1411,7 +1411,9 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
                     }
                     case 'm':
                     case 'M': {
-                        document.getElementById('off-canvas-start-button')!.click();
+                        document
+                            .getElementById('off-canvas-start-button')!
+                            .click();
                     }
                 }
             }