fix(UI) : Navbar Collapsing Issue #268

src/components/Footer/index.css

@@ -0,0 +1,6 @@
+@media only screen and (max-width: 550px) {
+  #footer {
+    max-width: 102vw;
+    min-width: 102vw;
+  }
+}

src/components/Footer/index.jsx

@@ -20,6 +20,9 @@ import React, { useState, useEffect } from "react";
 import { getFossologyVersion } from "services/info";
 import { getSessionStorage, setSessionStorage } from "shared/storageHelper";
 
+// custom css
+import "./index.css";
+
 const Footer = () => {
   const [version, setVersion] = useState(
     getSessionStorage("fossologyVersion") || null

src/components/Header/index.css

@@ -19,3 +19,11 @@
   display: flex;
   gap: 10px;
 }
+
+
+@media only screen and (max-width : 550px)  {
+  #navbar{
+    min-width: 102vw;
+  }
+
+}

src/components/Header/index.jsx

@@ -76,6 +76,7 @@ const Header = () => {
         expand="lg"
         className="bg-primary-color py-0 pl-0 text-white"
         sticky="top"
+        id="navbar"
       >
         <Navbar.Brand as={Link} to={routes.home} className="py-0">
           <Image

src/pages/Home/Features.jsx

@@ -32,7 +32,7 @@ const Features = () => {
     {
       id: 1,
       img: upload,
-      heading: "Upload and Scan files",
+      heading: "Upload and Scan Files",
       description:
         "Upload and scan files into the fossology server and get information.",
     },

src/styles/global.css

@@ -107,8 +107,12 @@ h6 {
 @media (max-width: 991px) {
   .dropleft .dropdown-menu {
     right: unset !important;
-    left: 3.5em !important;
+    left: 0em !important;
+    top: 3.5em !important;
+    bottom: unset !important;
     padding: 1.5rem;
+
+
   }
   #basic-navbar-nav {
     padding: 2rem;