Improve UI and fix build/lint issues

Author: Klath123

src/app/app.component.css

@@ -1,3 +1,10 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
 .navbar {
   position: sticky;
   top: 0;
@@ -7,7 +14,14 @@
   align-items: center;
   height: 64px;
   transition: all 0.25s ease;
+  flex-shrink: 0;
 }
+
+.sidenav-container {
+  flex: 1;
+  overflow: hidden; 
+}
+
 .logo {
   display: flex;
   align-items: center;
@@ -16,6 +30,7 @@
   margin-left: -4px;
   height: 100%; 
 }
+
 .logo-icon {
   transform: scale(0.95); 
   transform-origin: left center; 
@@ -35,35 +50,37 @@
   margin-top: 4px;        
   gap: 3px;               
 }
+
 .tag-title {
   font-size: 0.85em;      
   font-weight: 500;     
   line-height: 1;         
   letter-spacing: 0.04em;
 }
+
 .tag-subtitle {
   font-size: 0.65em;
   margin-top: 0;         
   letter-spacing: 0.08em; 
   opacity: 0.6;          
 } 
-.github-fork-ribbon::before {
-  background-color: #333;
-}
+
 .menu-btn {
   margin-right: 4px;
   transition: all 0.2s ease;
 }
+
 .menu-btn:hover {
   background: rgba(0,0,0,0.04);
   transform: scale(1.05);
 }
-.spacer {
-  flex: 1 1 auto;
-}
+
 .content {
   padding: 24px;
   animation: fadeSlide 1s ease;
+  height: 100%;
+  box-sizing: border-box;
+  overflow-y: auto;
 }
 @keyframes fadeSlide {
   from {
@@ -85,9 +102,6 @@
   .tag-subtitle {
     font-size: 11px;
   }
-  .github-fork-ribbon {
-        display: none;
-      }
   .logo,
   .logo-icon {
     opacity: 0;

src/app/app.component.html

@@ -16,15 +16,6 @@
     </div>
     <div class="dummy"></div>
   </div>
-  <span class="spacer"></span>
-  <a
-    target="_blank"
-    class="github-fork-ribbon"
-    href="https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel"
-    data-ribbon="Fork me on GitHub"
-    title="Fork me on GitHub">
-    Fork me on GitHub
-  </a>
 </mat-toolbar>
 <mat-sidenav-container class="sidenav-container">
   <mat-sidenav mode="side" opened class="sidenav" [style.width]="sidenavWidth">

src/app/app.component.spec.ts

@@ -52,11 +52,4 @@ describe('AppComponent', () => {
   it('should create the app', () => {
     expect(app).toBeTruthy();
   });
-
-  it('check for fork me on github ribbon generation', () => {
-    const compiled = fixture.nativeElement as HTMLElement;
-    const githubLink = compiled.querySelector('.github-fork-ribbon');
-    expect(githubLink).not.toBeNull();
-    expect(githubLink?.textContent?.trim()).toBe('Fork me on GitHub');
-  });
 });