Task/improve spacing in various tabs (#6909)

* Improve spacing

apps/client/src/app/components/home-summary/home-summary.html

@@ -1,4 +1,4 @@
-<div class="container pb-3 px-3">
+<div class="container px-3">
   <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>Summary</h1>
   <div class="row">
     <div class="col-xs-12 col-md-8 offset-md-2">

apps/client/src/app/pages/about/oss-friends/oss-friends-page.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <div class="mb-5 row">
+  <div class="row">
     <div class="col">
       <h1 class="h3 line-height-1 mb-4 text-center">
         <span class="d-none d-sm-block"
@@ -11,7 +11,7 @@
       </h1>
       <div class="row">
         @for (ossFriend of ossFriends; track ossFriend) {
-          <div class="col-xs-12 col-md-4 mb-3">
+          <div class="col-xs-12 col-md-4" [class.mb-3]="!$last">
             <a target="_blank" [href]="ossFriend.href">
               <mat-card appearance="outlined" class="d-flex flex-column h-100">
                 <mat-card-header>

apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.html

@@ -60,7 +60,7 @@
         }
       </div>
       @for (category of categories; track category.key) {
-        <div class="mb-4" [class.d-none]="category.rules?.length === 0">
+        <div [class.mb-4]="!$last || inactiveRules?.length > 0">
           <h4 class="align-items-center d-flex m-0">
             <span>{{ category.name }}</span>
             @if (user?.subscription?.type === 'Basic') {

apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts

@@ -107,7 +107,10 @@ export class GfXRayPageComponent {
       .fetchPortfolioReport()
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ xRay: { categories, statistics } }) => {
-        this.categories = categories;
+        this.categories = categories.filter(({ rules }) => {
+          return rules?.length > 0;
+        });
+
         this.inactiveRules = this.mergeInactiveRules(categories);
         this.statistics = statistics;
 

apps/client/src/app/pages/resources/glossary/resources-glossary.component.html

@@ -132,7 +132,7 @@
             </div>
           </div>
         </div>
-        <div class="mb-4 media">
+        <div class="media">
           <div class="media-body">
             <h2 class="h5 mb-1 mt-0">Stealth Wealth</h2>
             <div class="mb-1">

apps/client/src/app/pages/resources/guides/resources-guides.component.html

@@ -19,7 +19,7 @@
             </div>
           </div>
         </div>
-        <div class="mb-4 media">
+        <div class="media">
           <div class="media-body">
             <h2 class="h5 mb-1 mt-0">How do I get my finances in order?</h2>
             <div class="mb-1">

apps/client/src/app/pages/resources/markets/resources-markets.component.html

@@ -30,8 +30,8 @@
         </div>
       </div>
     </div>
-    <div class="media">
-      <div class="mb-4 media">
+    <div class="mb-4 media">
+      <div class="media-body">
         <h2 class="h5 mb-1 mt-0">Inflation Chart</h2>
         <div class="mb-1">
           <i>Inflation Chart</i> helps you find the intrinsic value of stock

apps/client/src/app/pages/resources/overview/resources-overview.component.html

@@ -4,7 +4,7 @@
       <h1 class="h3 mb-4 text-center" i18n>Resources</h1>
       <div class="overview-list">
         @for (item of overviewItems; track item) {
-          <div class="mb-4">
+          <div [class.mb-4]="!$last">
             <h2 class="h5 mb-1 mt-0">{{ item.title }}</h2>
             <p class="mb-1">{{ item.description }}</p>
             <a [routerLink]="item.routerLink"

apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <div class="mb-5 row">
+  <div class="row">
     <div class="col">
       <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>
         Discover Open Source Alternatives for Personal Finance Tools
@@ -22,7 +22,7 @@
         personalFinanceTool of personalFinanceTools;
         track personalFinanceTool
       ) {
-        <mat-card appearance="outlined" class="mb-3">
+        <mat-card appearance="outlined" [class.mb-3]="!$last">
           <mat-card-content class="p-0">
             <div class="container p-0">
               <div class="flex-nowrap no-gutters row">