From 7e4c75061328241435da9d63b0c5799643fba0f8 Mon Sep 17 00:00:00 2001
From: Devesh <deveshachaudhari@gmail.com>
Date: Sat, 14 Oct 2023 10:36:52 +0530
Subject: [PATCH] style: cap response div

---
 apps/rxjs-catch-error/src/app/app.component.ts    | 15 ++++++++++++---
 .../docs/challenges/rxjs/38-rxjs-catch-error.md   |  2 +-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/apps/rxjs-catch-error/src/app/app.component.ts b/apps/rxjs-catch-error/src/app/app.component.ts
index 17117e4..aae88b2 100644
--- a/apps/rxjs-catch-error/src/app/app.component.ts
+++ b/apps/rxjs-catch-error/src/app/app.component.ts
@@ -1,6 +1,6 @@
 import { Component, ElementRef, ViewChild } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { concatMap, fromEvent, map } from 'rxjs';
+import { Observable, Subscription, concatMap, fromEvent, map } from 'rxjs';
 import { CommonModule } from '@angular/common';
 
 @Component({
@@ -9,13 +9,15 @@ import { CommonModule } from '@angular/common';
   selector: 'app-root',
   template: `
     <div class="form-container">
-      <span>Posible values: posts, comments, albums, photos, todos, users</span>
+      <span
+        >possible values: posts, comments, albums, photos, todos, users</span
+      >
     </div>
     <div class="form-container">
       <input #inputRef type="text" placeholder="Enter text" />
       <button #buttonRef>Fetch</button>
     </div>
-    <div class="form-container">
+    <div class="response">
       {{ response | json }}
     </div>
   `,
@@ -46,6 +48,13 @@ import { CommonModule } from '@angular/common';
         border-radius: 4px;
         cursor: pointer;
       }
+      .response {
+        margin-left: 25%;
+        margin-top: 2%;
+        width: 50%;
+        text-align: center;
+        border: 1px solid #ccc;
+      }
     `,
   ],
 })
diff --git a/docs/src/content/docs/challenges/rxjs/38-rxjs-catch-error.md b/docs/src/content/docs/challenges/rxjs/38-rxjs-catch-error.md
index c1d7f58..275de5e 100644
--- a/docs/src/content/docs/challenges/rxjs/38-rxjs-catch-error.md
+++ b/docs/src/content/docs/challenges/rxjs/38-rxjs-catch-error.md
@@ -19,7 +19,7 @@ Handle the error without completion of the subscription.
 
 ## Constraints
 
-## Users should be able to console log value/error each time clicks on the fetch button.
+Users should be able to console log value/error each time clicks on the fetch button.
 
 :::note
 Start the project by running: `npx nx serve rxjs-catch-error`.