Fixed UI displaying errors like overflow and etc

.firebase/hosting.YnVpbGQ.cache

@@ -0,0 +1,16 @@
+favicon.ico,1705559444539,27edce7be5922cf0bef7d4136f69b5bfbdd5bf8c13c7b026f71187d41a00aa7d
+asset-manifest.json,1706684387915,e266e1d55a25fe6c2a1a9c052c781284cd0b3535bd843a611a93caffd5656a1d
+404.html,1706685558978,762bf484ba67404bd1a3b181546ea28d60dfddf18e9dd4795d8d25bcf3c1a890
+logo192.png,1705559445911,79e2b749561016bc8af300ea19f48347ceed3cb1a54f48ae456172eca45e08f0
+logo512.png,1705559446076,212b102aa09e51b3b3e06647e81f7801a61333e171f6582e8124379aabccb41d
+manifest.json,1705559444842,ee04fb47e525c67d8424ffe9b4d8a8a24e434504478afca4e0ca602146836d4c
+index.html,1706685560297,7fd26833677008de646656876600f824e6efd173fa0021977353ab78f8b47c51
+robots.txt,1705559446819,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
+static/css/main.f99197ed.css,1706684387940,9916eaada2f340ce02fb75a93ff21150acb27810dffba57c3a1c221061c93ec7
+static/js/main.2bbfcf2f.js.LICENSE.txt,1706684387940,17150bf793065e298c399de1477ac578cf98c5394757b92c0311a6843251498f
+static/media/Dangrek-Regular.c4d0a223adeb43a9a2cc.ttf,1706684387940,04e3474aae983fb3a4974a450f142781ae26cc775ddd02416f3daa890932408a
+static/css/main.f99197ed.css.map,1706684387940,8425178fb9742b4f090d8bfc1d84f96c123e77bc2a8f8a55b614aac785c244f2
+static/media/googleIcon.0b50af2fbb8c1e8ca23e.png,1706684387940,dfcb6a1bb7154f526bd1e6a265fe9754f316b46e54facb35db8dd339552c898c
+static/media/Comfortaa-Regular.6718cbec512d80eb9cbb.ttf,1706684387940,d97af405a0b2a1196c826f60f6af83ee2054705ed1e9ef96c44bd37bf8ee4018
+static/js/main.2bbfcf2f.js,1706684387940,3157adbfbea5c55001ede82079b9f60715e980fbe5fa159bf91b1659431e400f
+static/js/main.2bbfcf2f.js.map,1706684387945,825ccee272df965f00b2ca1ba199830975258e53fb70c6d7ab2d9c000761ad15

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "reactsocialmediaapp-b1ffb"
+  }
+}

.github/workflows/firebase-hosting-merge.yml

@@ -0,0 +1,19 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+'on':
+  push:
+    branches:
+      - master
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_REACTSOCIALMEDIAAPP_B1FFB }}'
+          channelId: live
+          projectId: reactsocialmediaapp-b1ffb

.github/workflows/firebase-hosting-pull-request.yml

@@ -0,0 +1,16 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+'on': pull_request
+jobs:
+  build_and_preview:
+    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_REACTSOCIALMEDIAAPP_B1FFB }}'
+          projectId: reactsocialmediaapp-b1ffb

firebase.json

@@ -0,0 +1,10 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}

src/App.css

@@ -266,25 +266,50 @@ body {
   margin-left: 0.5vw;
 }
 
+.user-post-title {
+  text-align: left;
+
+  margin-bottom: 2vmin;
+  padding-left: 0.5vw;
+  padding-right: 0.5vw;
+
+  width: 100%;
+}
+
 .user-post-title h1 {
   font-size: 8vmin;
+
+  overflow-wrap: break-word;
+
+  line-height: 13vmin;
 }
 
 .user-post-description p, .user-post-info p {
   font-family: Comfortaa-Regular;
 }
 
 .user-post-description {
+  width: 100%;
   margin-bottom: 1.9vw;
+
+  padding-left: 0.5vw;
+  padding-right: 0.5vw;
 }
 
 .user-post-description p {
   text-align: left;
-  line-height: 5vh;
+  line-height: 6vmin;
+
+  overflow-wrap: break-word;
 
   font-size: 5vmin;
 }
 
+.user-post-info {
+  padding-left: 0.5vw;
+  padding-right: 0.5vw;
+}
+
 .user-post-info p {
   font-size: 3vmin;
 }

src/Components/CreatePostForm.tsx

@@ -31,8 +31,8 @@ export const CreatePostForm = () => {
                   .required("Your post must have a title"), //Creating the shape with the error messages
         description: yup.string()
                         .trim()
-                        .max(150, "Description cannot exceed 150 characters")
                         .required("You must include a description")
+                        .max(150, "Description cannot exceed 150 characters")
     })
 
     //A lot of these functions are explained in one of the previous topics. It was in the form topic IIRC