From 10811b4624ee4a194f86ee690f55bb78dd9891c9 Mon Sep 17 00:00:00 2001
From: Frikky <frikky@shuffler.io>
Date: Tue, 18 Mar 2025 13:29:36 +0100
Subject: [PATCH] Fixed multiple navigation issues

---
 frontend/src/components/Billing.jsx     |  11 +-
 frontend/src/components/LeftSideBar.jsx |   8 +-
 frontend/src/components/Navbar.jsx      |  38 +++++--
 frontend/src/components/SearchData.jsx  | 124 ++++++++++++++---------
 frontend/src/context/ContextApi.jsx     |   3 +
 frontend/src/views/Docs.jsx             | 128 +++++++++++++++++++++++-
 functions/onprem/orborus/orborus.go     |  31 ++++--
 7 files changed, 272 insertions(+), 71 deletions(-)

diff --git a/frontend/src/components/Billing.jsx b/frontend/src/components/Billing.jsx
index 39e15706..3be59424 100644
--- a/frontend/src/components/Billing.jsx
+++ b/frontend/src/components/Billing.jsx
@@ -860,6 +860,7 @@ const Billing = memo((props) => {
 								"Add Card Details"
 							}
 						</Button>
+
 						{userdata.has_card_available === true ?
 							<Button
 								fullWidth
@@ -888,7 +889,8 @@ const Billing = memo((props) => {
 							: null}
 
 					</span>
-					: null}
+				: null}
+
 				{showSupport ?
 					<Button variant="outlined" color="primary" style={{ marginTop: 20, marginBottom: 10, }} onClick={() => {
 						if (window.drift !== undefined) {
@@ -1204,12 +1206,13 @@ const Billing = memo((props) => {
 										ReactGA.event({
 											category: "Billing",
 											action: "Buy_consultation_hours",
-										});
+										})
 									}
+
 									const url = userdata.licensed === true
 										? "https://book.stripe.com/6oEeY23fw2T84M06oq"
-										: "https://book.stripe.com/00g6rw3fw9hwguI289";
-									window.open(url, "_blank");
+										: "https://book.stripe.com/00g6rw3fw9hwguI289"
+									window.open(url, "_blank")
 								}}
 							>
 								Book Professional Service Hours
diff --git a/frontend/src/components/LeftSideBar.jsx b/frontend/src/components/LeftSideBar.jsx
index 3c999dbe..6ef36775 100644
--- a/frontend/src/components/LeftSideBar.jsx
+++ b/frontend/src/components/LeftSideBar.jsx
@@ -57,7 +57,7 @@ const ExpandMoreAndLessIcon = "/icons/expandMoreIcon.svg";
 const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
 
   const navigate = useNavigate();
-  const {setLeftSideBarOpenByClick, leftSideBarOpenByClick, setSearchBarModalOpen, searchBarModalOpen} = useContext(Context);
+  const {setLeftSideBarOpenByClick, leftSideBarOpenByClick, setSearchBarModalOpen, searchBarModalOpen, isDocSearchModalOpen} = useContext(Context);
 
   const [expandLeftNav, setExpandLeftNav] = useState(false);
   const [activeOrgName, setActiveOrgName] = useState(
@@ -790,7 +790,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
         height: "calc((100vh - 32px)*1.2)",
       }}
     >
-      {searchBarModalOpen ? <ModalView serverside={serverside} userdata={userdata} searchBarModalOpen={searchBarModalOpen} setSearchBarModalOpen={setSearchBarModalOpen} globalUrl={globalUrl} /> : null}
+      {searchBarModalOpen && !isDocSearchModalOpen ? <ModalView serverside={serverside} userdata={userdata} searchBarModalOpen={searchBarModalOpen} setSearchBarModalOpen={setSearchBarModalOpen} globalUrl={globalUrl} isDocSearchModalOpen={isDocSearchModalOpen} /> : null}
       <Box
         sx={{
           display: "flex",
@@ -1911,11 +1911,11 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
 };
 
 export default LeftSideBar;
-const ModalView = memo(({searchBarModalOpen, setSearchBarModalOpen, globalUrl, serverside, userdata}) => {
+const ModalView = memo(({searchBarModalOpen, setSearchBarModalOpen, globalUrl, serverside, userdata, isDocSearchModalOpen}) => {
   return (
     (
       <Dialog
-        open={searchBarModalOpen}
+        open={searchBarModalOpen && !isDocSearchModalOpen}
         onClose={() => {
           setSearchBarModalOpen(false);
         }}
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index c3cca3f8..837df591 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import {
   AppBar,
@@ -35,6 +35,7 @@ import { toast } from "react-toastify";
 import AddIcon from '@mui/icons-material/Add';
 import Mousetrap from "mousetrap";
 import LicencePopup from "../components/LicencePopup.jsx";
+import { Context } from "../context/ContextApi.jsx";
 
 const curpath = (typeof window !== "undefined" && window.location && typeof window.location.pathname === "string")
 ? window.location.pathname
@@ -750,7 +751,7 @@ const Navbar = (props) => {
   const topbar_var = "topbar_closed10"
 
   const theme = useTheme();
-  const [searchBarModalOpen, setSearchBarModalOpen] = useState(false);
+  const {searchBarModalOpen, setSearchBarModalOpen, isDocSearchModalOpen} = useContext(Context)
   const [pricingModalOpen, setPricingModalOpen] = useState(false);
   const isTabletOrMobile = useMediaQuery(theme.breakpoints.down("lg"));
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
@@ -845,7 +846,7 @@ const Navbar = (props) => {
 
   const modalView = (
     <Dialog
-      open={searchBarModalOpen}
+      open={searchBarModalOpen && !isDocSearchModalOpen}
       onClose={() => {
         setSearchBarModalOpen(false);
       }}
@@ -1287,10 +1288,21 @@ const Navbar = (props) => {
           <Button
             onMouseEnter={() => handleMenuOpen(item)}
             onMouseLeave={(e) => {
-              // Only close if not moving to dropdown
+              
+              const dropdown = document.querySelector('.dropdown-content'); // Adjust the selector as needed
               const rect = e.currentTarget.getBoundingClientRect();
+              const dropdownRect = dropdown ? dropdown.getBoundingClientRect() : null;
+
+              // Check if the cursor is moving down
               const isMovingDown = e.clientY > rect.bottom;
-              if (!isMovingDown) {
+
+              // Check if the cursor is within the dropdown area or a buffer zone
+              const isOverDropdown = dropdownRect && (
+                (e.clientY >= dropdownRect.top - 20 && e.clientY <= dropdownRect.bottom + 20) && // Buffer zone
+                (e.clientX >= dropdownRect.left && e.clientX <= dropdownRect.right)
+              );
+
+              if (!isMovingDown && !isOverDropdown) {
                 handleMenuClose();
               }
             }}
@@ -1352,6 +1364,11 @@ const Navbar = (props) => {
         onClick={() => {
           if(isCloud) {
             navigate("/pricing");
+            ReactGA.event({
+              category: "navbar",
+              action: "pricing_click",
+              label: "go_to_pricing",
+            })
           } else {
             window.open("https://shuffler.io/pricing", '_blank');
             return;
@@ -1365,6 +1382,11 @@ const Navbar = (props) => {
         onClick={() => {
           if(isCloud) {
             navigate("/partners");
+            ReactGA.event({
+              category: "navbar",
+              action: "partners_click",
+              label: "go_to_partners",
+            })
           } else {
             window.open("https://shuffler.io/partners", '_blank');
             return;
@@ -1722,7 +1744,11 @@ const Navbar = (props) => {
       }}
     >
       {topbar}
-      <Container maxWidth="xl">
+      <Container maxWidth="xl" sx={{ zoom: {
+        md: "0.7",
+        lg: "0.8",
+        xl: "1",
+      } }}>
         <Toolbar disableGutters sx={{ justifyContent: "space-between" }}>
           <Box sx={{ display: "flex", alignItems: "center" }}>
             <Link
diff --git a/frontend/src/components/SearchData.jsx b/frontend/src/components/SearchData.jsx
index 0a53e7e9..ddb949f9 100644
--- a/frontend/src/components/SearchData.jsx
+++ b/frontend/src/components/SearchData.jsx
@@ -51,12 +51,13 @@ const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e52
 const SearchData = props => {
     const { serverside, globalUrl, userdata } = props
     let navigate = useNavigate();
-    const { searchBarModalOpen, setSearchBarModalOpen } = useContext(Context);
+    const { searchBarModalOpen, setSearchBarModalOpen, isDocSearchModalOpen } = useContext(Context);
     const borderRadius = 3
     const node = useRef()
     const [searchOpen, setSearchOpen] = useState(false)
     const [oldPath, setOldPath] = useState("")
     const [value, setValue] = useState("");
+    const isDocSearchModal = isDocSearchModalOpen;
 
     const handleLinkClick = () => {
         if (searchBarModalOpen) {
@@ -90,6 +91,8 @@ const SearchData = props => {
         const [inputValue, setInputValue] = useState(currentRefinement);
 
         const textFieldRef = useRef(null);
+        const debounceTimeoutRef = useRef(null);
+
         const keyPressHandler = (e) => {
             if (e.key === "Enter") {
                 e.preventDefault();
@@ -110,10 +113,25 @@ const SearchData = props => {
         }, [searchOpen]);
 
         useEffect(() => {
-            if (currentRefinement !== inputValue) {
-                refine(inputValue);
+            // Clear any existing timeout to prevent multiple executions
+            if (debounceTimeoutRef.current) {
+                clearTimeout(debounceTimeoutRef.current);
             }
-        }, [currentRefinement]);
+
+            // Set a new timeout that will execute the search after a 200ms delay
+            debounceTimeoutRef.current = setTimeout(() => {
+                refine(inputValue);
+                setSearchOpen(inputValue.trim() !== '');
+            }, 200);
+
+            // Cleanup function that runs when component unmounts or when dependencies change
+            // This ensures we don't have any hanging timeouts
+            return () => {
+                if (debounceTimeoutRef.current) {
+                    clearTimeout(debounceTimeoutRef.current);
+                }
+            };
+        }, [inputValue, refine]); // Effect runs when inputValue or refine function changes
 
         return (
 
@@ -122,7 +140,7 @@ const SearchData = props => {
             >
                 <TextField
                     fullWidth
-                    style={{ zIndex: 1100, marginTop: -20, marginBottom: 200, position: "fixed", backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, width: 685, }}
+                    style={{ zIndex: 1100, marginTop: -20, marginBottom: 200, position: "fixed", backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, width: 690, }}
                     InputProps={{
                         style: {
                             color: "white",
@@ -149,7 +167,7 @@ const SearchData = props => {
                     autoComplete='off'
                     type="search"
                     color="primary"
-                    placeholder="Find Public Apps, Workflows, Documentation..."
+                    placeholder={isDocSearchModal ? "Type to search documentation..." : "Find Public Apps, Workflows, Documentation..."}
                     value={inputValue}
                     id="shuffle_search_field"
                     onClick={(event) => {
@@ -163,12 +181,6 @@ const SearchData = props => {
                     onChange={(event) => {
                         const newValue = event.target.value;
                         setInputValue(newValue);
-                        refine(newValue);
-                        if (newValue.trim() !== '') {
-                            setSearchOpen(true);
-                        } else {
-                            setSearchOpen(false);
-                        }
                     }}
                     onKeyDown={keyPressHandler}
                     inputRef={textFieldRef}
@@ -605,7 +617,11 @@ const SearchData = props => {
         }
 
         if (hits.length > 4) {
-            hits = hits.slice(0, 4)
+            if(!isDocSearchModal) {
+                hits = hits.slice(0, 4)
+            } else {
+                hits = hits.slice(0, 15)
+            }
         }
 
         const type = "documentation"
@@ -614,15 +630,19 @@ const SearchData = props => {
         //console.log(type, hits.length, hits)
 
         return (
-            <Card elevation={0} style={{ marginRight: 10, marginTop: 50, color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: "100%", left: 470, boxShadows: "none", }}>
+            <Card elevation={0} style={{ marginRight: 10, marginTop: isDocSearchModal ? 0 : 50, color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: "100%", left: 470, boxShadows: "none", }}>
                 {/* <IconButton style={{ zIndex: 5000, position: "absolute", right: 14, color: "grey" }} onClick={() => {
                     setSearchOpen(false)
                 }}>
                     <CloseIcon />
                 </IconButton> */}
-                <Typography variant="h6" style={{ margin: "10px 10px 0px 20px", color: "#FF8444", borderBottom: "1px solid", width: 152 }}>
-                    Documentation
-                </Typography>
+                {
+                    !isDocSearchModal && (
+                        <Typography variant="h6" style={{ margin: "10px 10px 0px 20px", color: "#FF8444", borderBottom: "1px solid", width: 152 }}>
+                            Documentation
+                        </Typography>
+                    )
+                }
                 {/*
 				<IconButton edge="end" aria-label="delete" style={{position: "absolute", top: 5, right: 15,}} onClick={() => {
 					setSearchOpen(false)
@@ -630,7 +650,7 @@ const SearchData = props => {
 					<DeleteIcon />
 				</IconButton>
 				*/}
-                <List style={{ backgroundColor: theme.palette.inputColor, }}>
+                <List style={{ backgroundColor: theme.palette.inputColor, marginTop: isDocSearchModal ? 35 : 0, }}>
                     {hits.length === 0 ?
                         <ListItem style={outerlistitemStyle}>
                             <ListItemAvatar onClick={() => console.log(hits)}>
@@ -654,8 +674,8 @@ const SearchData = props => {
                                 cursor: "pointer",
                                 marginLeft: 5,
                                 marginRight: 5,
-                                maxHeight: 75,
-                                minHeight: 75,
+                                maxHeight: isDocSearchModal ? 100 : 75,
+                                minHeight: isDocSearchModal ? 100 : 75,
                                 maxWidth: 420,
                                 minWidth: "100%",
                             }
@@ -666,9 +686,13 @@ const SearchData = props => {
                                 (hit.name.charAt(0).toUpperCase() + hit.name.slice(1)).replaceAll("_", " ")
 
                             if (name.length > 30) {
-                                name = name.slice(0, 30) + "..."
+                                if(isDocSearchModal) {
+                                    name = name.slice(0, 70) + "..."
+                                } else {
+                                    name = name.slice(0, 30) + "..."
+                                }
                             }
-                            const secondaryText = hit.data !== undefined ? hit.data.slice(0, 40) + "..." : ""
+                            const secondaryText = hit.data !== undefined ? hit.data.slice(0, 80) + "..." : ""
                             const avatar = hit.image_url === undefined ?
                                 baseImage
                                 :
@@ -719,7 +743,7 @@ const SearchData = props => {
                                         </ListItemAvatar>
                                         <ListItemText
                                             primary={name}
-                                            secondary={secondaryText}
+                                            secondary={<div style={{ padding: '8px 0' }}>{secondaryText}</div>}
                                         />
                                         {/*
 									<ListItemSecondaryAction>
@@ -897,28 +921,38 @@ const SearchData = props => {
 
     const modalView = (
         <div>
-            <Grid container style={{ display: "contents", }}>
-                <Grid item xs="auto" style={{}}>
-                    <Index indexName="appsearch">
-                        <CustomAppHits />
-                    </Index>
+            {
+                !isDocSearchModal ? (
+                <Grid container style={{ display: "contents", }}>
+                    <Grid item xs="auto" style={{}}>
+                        <Index indexName="appsearch">
+                            <CustomAppHits />
+                        </Index>
+                    </Grid>
+                    <Grid item xs="auto" style={{}}>
+                        <Index indexName="workflows">
+                            <CustomWorkflowHits />
+                        </Index>
+                    </Grid>
+                    <Grid item xs="auto" style={{}}>
+                        <Index indexName="documentation">
+                            <CustomDocHits />
+                        </Index>
+                    </Grid>
+                    <Grid item xs="auto" style={{}}>
+                        <Index indexName="discord_chat">
+                            <CustomDiscordHits />
+                        </Index>
+                    </Grid>
                 </Grid>
-                <Grid item xs="auto" style={{}}>
-                    <Index indexName="workflows">
-                        <CustomWorkflowHits />
-                    </Index>
-                </Grid>
-                <Grid item xs="auto" style={{}}>
-                    <Index indexName="documentation">
-                        <CustomDocHits />
-                    </Index>
-                </Grid>
-                <Grid item xs="auto" style={{}}>
-                    <Index indexName="discord_chat">
-                        <CustomDiscordHits />
-                    </Index>
-                </Grid>
-            </Grid>
+                ) : (
+                    <Grid item xs="auto" style={{width: "100%"}}>
+                        <Index indexName="documentation">
+                            <CustomDocHits />
+                        </Index>
+                    </Grid>
+                )
+            }
         </div>
     )
 
@@ -932,7 +966,7 @@ const SearchData = props => {
                 <CustomSearchBox />
                 {modalView}
             </InstantSearch>
-            {gettingStartData}
+            {!isDocSearchModal && gettingStartData}
         </div>
     )
 }
diff --git a/frontend/src/context/ContextApi.jsx b/frontend/src/context/ContextApi.jsx
index 4e82ba1e..00b8b764 100644
--- a/frontend/src/context/ContextApi.jsx
+++ b/frontend/src/context/ContextApi.jsx
@@ -8,6 +8,7 @@ export const AppContext = (props) => {
 
     // Left side bar global states
     const [searchBarModalOpen, setSearchBarModalOpen] = useState(false);
+    const [isDocSearchModalOpen, setIsDocSearchModalOpen] = useState(false);
     const [leftSideBarOpenByClick, setLeftSideBarOpenByClick] = useState(currentLocation?.includes('/workflows/') ? false : true)
     const [windowWidth, setWindowWidth] = useState(serverside === true ? 100 : window.innerWidth);
 
@@ -37,6 +38,8 @@ export const AppContext = (props) => {
 
     return (
         <Context.Provider value={{
+            isDocSearchModalOpen,
+            setIsDocSearchModalOpen,
             searchBarModalOpen,
             setSearchBarModalOpen,
             leftSideBarOpenByClick,
diff --git a/frontend/src/views/Docs.jsx b/frontend/src/views/Docs.jsx
index 3b1687d9..9abd934d 100755
--- a/frontend/src/views/Docs.jsx
+++ b/frontend/src/views/Docs.jsx
@@ -23,7 +23,12 @@ import {
     List,
     Collapse,
     ListItemButton,
-    ListItemText
+    ListItemText,
+    Dialog,
+    DialogTitle,
+    Box,
+    DialogContent,
+    InputAdornment
 } from "@mui/material";
 import {
     Link as LinkIcon,
@@ -32,9 +37,12 @@ import {
     ExpandMore as ExpandMoreIcon,
     FileCopy as FileCopyIcon,
     ChevronLeft,
-    ChevronRight
+    ChevronRight,
+    Search as SearchIcon,
+    Close as CloseIcon
 } from "@mui/icons-material";
 import { fontGrid } from "@mui/material/styles/cssUtils.js";
+import SearchBox from "../components/SearchData.jsx";
 
 const Body = {
     //maxWidth: 1000,
@@ -280,6 +288,8 @@ export const CodeHandler = (props) => {
 const Docs = (defaultprops) => {
     const { globalUrl, selectedDoc, serverside, serverMobile, isLoggedIn, isLoaded, userdata } = defaultprops;
 
+    const { searchBarModalOpen, setSearchBarModalOpen, isDocSearchModalOpen, setIsDocSearchModalOpen, leftSideBarOpenByClick } = useContext(Context);
+
     let navigate = useNavigate();
     const location = useLocation();
     // Quickfix for react router 5 -> 6 
@@ -316,6 +326,7 @@ const Docs = (defaultprops) => {
     const [activeSubItem, setActiveSubItem] = useState(false);
     const headingElementsRef = useRef({})
     var isArticlePage = window.location.pathname.includes("/articles/") || window.location.pathname === "/articles" ? true : false;
+    const searchFieldRef = useRef(null);
 
 
     useEffect(() => {
@@ -338,6 +349,13 @@ const Docs = (defaultprops) => {
 		}
     }, [location]);
 
+    useEffect(() => {
+        return () => {
+            setIsDocSearchModalOpen(false);
+            setSearchBarModalOpen(false);
+        };
+    }, []); 
+    
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget);
     }
@@ -467,6 +485,71 @@ const Docs = (defaultprops) => {
         return headings;
     };
 
+    const modalView = (
+        <Dialog
+          open={searchBarModalOpen && isDocSearchModalOpen}
+          onClose={() => {
+            setSearchBarModalOpen(false);
+            if (searchFieldRef.current) {
+                searchFieldRef.current.blur();
+            }
+          }}
+          PaperProps={{
+            style: {
+              color: "white",
+              minWidth: 750,
+              minHeight: "180px",
+              maxHeight: "85vh",
+              borderRadius: 16,
+              border: "1px solid var(--Container-Stroke, #494949)",
+              background: "var(--Container, #000000)",
+              boxShadow: "0px 16px 24px 8px rgba(0, 0, 0, 0.25)",
+              position: "fixed",
+              top: "70px",
+              left: "50%",
+              transform: "translateX(-50%)",
+            },
+          }}
+          sx={{
+            zIndex: 50005,
+            '& .MuiBackdrop-root': {
+              backgroundColor: 'rgba(0, 0, 0, 0.8)',
+            },
+          }}
+        >
+          <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", px: 2, pr: 3, pt: 2 }}>
+            <DialogTitle
+              sx={{ 
+                color: "var(--Paragraph-text, #C8C8C8)",
+                p: 0,
+                m: 0,
+                ml: 1.5,
+                fontFamily: theme.typography.fontFamily,
+              }}
+            >
+              Search for Documentation
+            </DialogTitle>
+            <IconButton 
+              onClick={() => setSearchBarModalOpen(false)}
+              sx={{ 
+                color: 'white',
+                '&:hover': {
+                  backgroundColor: 'rgba(255, 255, 255, 0.1)'
+                }
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </Box>
+          <DialogContent>
+            <Box sx={{ pt: 3 }}>
+              <SearchBox globalUrl={globalUrl} serverside={serverside} userdata={userdata} />
+            </Box>
+          </DialogContent>
+          <Divider sx={{ backgroundColor: 'rgba(255, 255, 255, 0.1)' }}/>
+        </Dialog>
+      );
+
 
     // extract TOC from actual markdown
     const tocvalue = (markdown) => {
@@ -1117,9 +1200,50 @@ const Docs = (defaultprops) => {
             <div style={Body}>
                 <div style={!isArticlePage ? SideBar : (sidebarOpen ? SideBar : collapsedSideBar)}>
                     <Paper style={SidebarPaperStyle}>
+                        {modalView}
+                        {
+                            !isArticlePage && (
+                                <TextField
+                                    variant="outlined"
+                                    placeholder="Search Docs..."
+                                    size="small"
+                                    onClick={() => {
+                                        setIsDocSearchModalOpen(true)
+                                        setSearchBarModalOpen(true)
+                                    }}
+                                    inputRef={searchFieldRef}
+                                    InputProps={{
+                                        endAdornment: (
+                                            <InputAdornment position="end">
+                                                <SearchIcon style={{ color: "white" }} />
+                                            </InputAdornment>
+                                        ),
+                                        style: {
+                                            backgroundColor: "#212121",
+                                            borderRadius: 4,
+                                            color: "white",
+                                        },
+                                    }}
+                                    style={{
+                                        marginTop: 10,
+                                        marginLeft: 10,
+                                        borderRadius: 4,
+                                        width: !isLoggedIn ? "14%" : !leftSideBarOpenByClick ?  "12%" : "11%",
+                                        maxWidth: "285px",
+                                        position: "fixed",
+                                        zIndex: 1100,
+                                    }}
+                                    inputProps={{
+                                        readOnly: true,
+                                    }}
+                                />
+                            )
+                        }
                         <List style={{ 
                             listStyle: "none", 
                             paddingLeft: "0",
+                            paddingTop: !isArticlePage ? "60px" : undefined,
+                            paddingBottom: !isArticlePage ? "30px" : undefined,
                             display: isArticlePage ? sidebarOpen ? "block" : "none" : undefined,
                             opacity: isArticlePage ? sidebarOpen ? 1 : 0 : undefined,
                             transition: isArticlePage ? "opacity 0.3s ease" : undefined,
diff --git a/functions/onprem/orborus/orborus.go b/functions/onprem/orborus/orborus.go
index dbc79434..d13acf89 100755
--- a/functions/onprem/orborus/orborus.go
+++ b/functions/onprem/orborus/orborus.go
@@ -773,25 +773,36 @@ func handleBackendImageDownload(ctx context.Context, images string) error {
 	//time.Sleep(time.Duration(30) * time.Second)
 
 	newImages := []string{}
-	for _, image := range strings.Split(images, ",") {
-		image = strings.TrimSpace(image)
-		if shuffle.ArrayContains(handled, image) {
+	for _, curimage := range strings.Split(images, ",") {
+		curimage = strings.TrimSpace(curimage)
+		if shuffle.ArrayContains(handled, curimage) {
 			continue
 		}
 
-		handled = append(handled, image)
-		if !strings.Contains(image, "/") {
-			image = fmt.Sprintf("frikky/shuffle:%s", image)
+		handled = append(handled, curimage)
+		if !strings.Contains(curimage, "/") {
+			curimage = fmt.Sprintf("frikky/shuffle:%s", curimage)
 		}
 
-		newImages = append(newImages, image)
+		newImages = append(newImages, curimage)
 
-		log.Printf("[DEBUG] Downloading image: %s", image)
-		err := shuffle.DownloadDockerImageBackend(&http.Client{Timeout: imagedownloadTimeout}, image)
+		// Force remove the current image to avoid cached layers
+		_, err := dockercli.ImageRemove(ctx, curimage, image.RemoveOptions{
+			Force: true,
+			PruneChildren: true,
+		})
+
+		if err != nil {
+			log.Printf("[ERROR] Failed removing image for re-download: %s", err)
+		} else {
+			log.Printf("[DEBUG] Removed image: %s", curimage)
+		}
+
+		err = shuffle.DownloadDockerImageBackend(&http.Client{Timeout: imagedownloadTimeout}, curimage)
 		if err != nil {
 			log.Printf("[ERROR] Failed downloading image: %s", err)
 		} else {
-			log.Printf("[DEBUG] Downloaded image: %s", image)
+			log.Printf("[DEBUG] Downloaded image: %s", curimage)
 		}
 	}