From a0fcb6c91f08fcb615d278850c1df35ca9680691 Mon Sep 17 00:00:00 2001
From: Pragadesh-45 <temporaryg7904@gmail.com>
Date: Tue, 15 Oct 2024 14:15:06 +0530
Subject: [PATCH 1/5] refactor: GenerateCodeItem component to fix width issue

---
 .../Collection/CollectionItem/GenerateCodeItem/index.js         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
index aabed03dd..d00ad4aa6 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
@@ -48,7 +48,7 @@ const GenerateCodeItem = ({ collection, item, onClose }) => {
   return (
     <Modal size="lg" title="Generate Code" handleCancel={onClose} hideFooter={true}>
       <StyledWrapper>
-        <div className="flex w-full">
+        <div className="flex w-full" style={{ width: '1000px' }}>
           <div>
             <div className="generate-code-sidebar">
               {languages &&

From b900d3070d9377780a29467f95b2341b81c20be6 Mon Sep 17 00:00:00 2001
From: Pragadesh-45 <temporaryg7904@gmail.com>
Date: Tue, 15 Oct 2024 14:16:51 +0530
Subject: [PATCH 2/5] feat: tab switch for languages

---
 .../Collection/CollectionItem/GenerateCodeItem/index.js  | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
index d00ad4aa6..cd99782d1 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
@@ -59,7 +59,16 @@ const GenerateCodeItem = ({ collection, item, onClose }) => {
                     className={
                       language.name === selectedLanguage.name ? 'generate-code-item active' : 'generate-code-item'
                     }
+                    role="button"
+                    tabIndex={0}
                     onClick={() => setSelectedLanguage(language)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        setSelectedLanguage(language);
+                        e.preventDefault();
+                      }
+                    }}
+                    aria-pressed={language.name === selectedLanguage.name}
                   >
                     <span className="capitalize">{language.name}</span>
                   </div>

From ca6c2ebb03b1be8a28a68b394ddacc57a374e3e1 Mon Sep 17 00:00:00 2001
From: Pragadesh-45 <temporaryg7904@gmail.com>
Date: Wed, 16 Oct 2024 13:00:00 +0530
Subject: [PATCH 3/5] style: add logic to handle different screen sizes

---
 .../GenerateCodeItem/StyledWrapper.js         | 22 +++++++++++++++++++
 .../CollectionItem/GenerateCodeItem/index.js  |  2 +-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/StyledWrapper.js
index ca582a842..3d8ea1229 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/StyledWrapper.js
@@ -35,6 +35,28 @@ const StyledWrapper = styled.div`
       background-color: ${(props) => props.theme.collection.environment.settings.item.active.hoverBg} !important;
     }
   }
+
+  .flexible-container {
+    width: 100%;
+  }
+
+  @media (max-width: 600px) {
+    .flexible-container {
+      width: 500px;
+    }
+  }
+
+  @media (min-width: 601px) and (max-width: 1200px) {
+    .flexible-container {
+      width: 800px;
+    }
+  }
+
+  @media (min-width: 1201px) {
+    .flexible-container {
+      width: 900px;
+    }
+  }
 `;
 
 export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
index cd99782d1..f7ce85023 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
@@ -48,7 +48,7 @@ const GenerateCodeItem = ({ collection, item, onClose }) => {
   return (
     <Modal size="lg" title="Generate Code" handleCancel={onClose} hideFooter={true}>
       <StyledWrapper>
-        <div className="flex w-full" style={{ width: '1000px' }}>
+        <div className="flex w-full flexible-container">
           <div>
             <div className="generate-code-sidebar">
               {languages &&

From 5b6172e5ac64d6744a9d564e48d9cb68cb15da80 Mon Sep 17 00:00:00 2001
From: Pragadesh-45 <temporaryg7904@gmail.com>
Date: Tue, 3 Dec 2024 17:59:48 +0530
Subject: [PATCH 4/5] feat: enhance keyboard navigation for language selection
 in GenerateCodeItem

---
 .../CollectionItem/GenerateCodeItem/index.js      | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
index f7ce85023..ef5143551 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
@@ -63,9 +63,20 @@ const GenerateCodeItem = ({ collection, item, onClose }) => {
                     tabIndex={0}
                     onClick={() => setSelectedLanguage(language)}
                     onKeyDown={(e) => {
-                      if (e.key === 'Enter' || e.key === ' ') {
-                        setSelectedLanguage(language);
+                      if (e.key === 'Tab') {
                         e.preventDefault();
+                        const currentIndex = languages.findIndex((lang) => lang.name === selectedLanguage.name);
+                        const nextIndex = e.shiftKey
+                          ? (currentIndex - 1 + languages.length) % languages.length
+                          : (currentIndex + 1) % languages.length;
+                        setSelectedLanguage(languages[nextIndex]);
+                      }
+
+                      if (e.shiftKey && e.key === 'Tab') {
+                        e.preventDefault();
+                        const currentIndex = languages.findIndex((lang) => lang.name === selectedLanguage.name);
+                        const nextIndex = (currentIndex - 1 + languages.length) % languages.length;
+                        setSelectedLanguage(languages[nextIndex]);
                       }
                     }}
                     aria-pressed={language.name === selectedLanguage.name}

From b5ae2b2b45b5992a8f05629a802a06d420ca7f5e Mon Sep 17 00:00:00 2001
From: Pragadesh-45 <temporaryg7904@gmail.com>
Date: Mon, 6 Jan 2025 16:33:17 +0530
Subject: [PATCH 5/5] fix: enhance keyboard navigation for language selection
 in GenerateCodeItem

---
 .../CollectionItem/GenerateCodeItem/index.js       | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
index ef5143551..792736b12 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
@@ -63,22 +63,21 @@ const GenerateCodeItem = ({ collection, item, onClose }) => {
                     tabIndex={0}
                     onClick={() => setSelectedLanguage(language)}
                     onKeyDown={(e) => {
-                      if (e.key === 'Tab') {
+                      if (e.key === 'Tab' || (e.shiftKey && e.key === 'Tab')) {
                         e.preventDefault();
                         const currentIndex = languages.findIndex((lang) => lang.name === selectedLanguage.name);
                         const nextIndex = e.shiftKey
                           ? (currentIndex - 1 + languages.length) % languages.length
                           : (currentIndex + 1) % languages.length;
                         setSelectedLanguage(languages[nextIndex]);
-                      }
 
-                      if (e.shiftKey && e.key === 'Tab') {
-                        e.preventDefault();
-                        const currentIndex = languages.findIndex((lang) => lang.name === selectedLanguage.name);
-                        const nextIndex = (currentIndex - 1 + languages.length) % languages.length;
-                        setSelectedLanguage(languages[nextIndex]);
+                        // Explicitly focus on the new active element
+                        const nextElement = document.querySelector(`[data-language="${languages[nextIndex].name}"]`);
+                        nextElement?.focus();
                       }
+                      
                     }}
+                    data-language={language.name}
                     aria-pressed={language.name === selectedLanguage.name}
                   >
                     <span className="capitalize">{language.name}</span>
@@ -89,6 +88,7 @@ const GenerateCodeItem = ({ collection, item, onClose }) => {
           <div className="flex-grow p-4">
             {isValidUrl(finalUrl) ? (
               <CodeView
+                tabIndex={-1}
                 language={selectedLanguage}
                 item={{
                   ...item,