Updated the styles to align the coverage and details next to each other

Author: YashwanthRaoBN

src/components/Collapsible/CircularProgress.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const CircularProgress = ({ percentage = 65, size = 120, strokeWidth = 12 }) => {
+export const CircularProgress = ({ percentage = 65, size = 150, strokeWidth = 13 }) => {
   const radius = (size - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
   const progress = circumference * (1 - percentage / 100);
@@ -37,7 +37,7 @@ export const CircularProgress = ({ percentage = 65, size = 120, strokeWidth = 12
         y="50%"
         dominantBaseline="central"
         textAnchor="middle"
-        fontSize="24"
+        fontSize="30"
         fontWeight="bold"
         fill="#4caf50"
       >
@@ -48,7 +48,7 @@ export const CircularProgress = ({ percentage = 65, size = 120, strokeWidth = 12
         y="70%"
         dominantBaseline="central"
         textAnchor="middle"
-        fontSize="12"
+        fontSize="18"
         fill="white"
       >
         Coverage

src/components/Collapsible/CollapsibleSection.jsx

@@ -103,21 +103,26 @@ const CollapsibleSection = ({ isPanelOpen, techniqueName, importContent, viewCus
           </div>
 
           {isOpen && (
-              <div className={`collapsible-details ${isPanelOpen ? 'shrink' : ''}`}>
-                {type === 'details' ? (
-                  <>
+              <div className={`collapsible-details ${isPanelOpen ? 'shrink' : ''}`} style={{ display: 'flex', width: '100%', flexWrap: 'nowrap' }}>
+              {type === 'details' ? (
+                <>
+                  {/* First section for Display Details (takes 70% of width) */}
+                  <div className="details-section1">
+                    {display_details(details, section_header)}
+                  </div>
+            
+                  {/* Second section for CircularProgress (takes 30% of width) */}
+                  <div className="circular-progress-section">
                     {viewCustomMode && (section_header === 'Mitigation' || section_header === 'Detection') && (
-                      <div style={{ marginLeft: '40px' }}>
-                        <CircularProgress percentage={getCoverage(techniqueName, section_header)}/>
-                      </div>
+                      <CircularProgress percentage={getCoverage(techniqueName, section_header)} />
                     )}
-
-                    {display_details(details, section_header)}
-                  </>
-                ) : (
-                  display_references(references)
-                )}
-              </div>
+                  </div>
+                </>
+              ) : (
+                display_references(references)
+              )}
+            </div>
+            
           )}
 
         </div>

src/components/ContentManager/ManageContent.css

@@ -1,13 +1,13 @@
-.collapsible-section {
+.collapsible-section1 {
     margin: var(--gap) 0;
   }
 
-  .collapsible-content {
+  .collapsible-content1 {
     background-color: #2b2d31;
     border: 1px solid #ddd;
     color: white;
     margin-left: 0;
-    max-width: 100%;
+    width: 100%;
     overflow: hidden;
     display: flex;
     flex-direction: column;
@@ -102,4 +102,101 @@
   cursor: pointer;
   margin-bottom: 10px !important;
 }
-  
+  
+
+.Collapsible__trigger1 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+
+  padding: calc(var(--gap) / 3) var(--gap);
+
+  cursor: pointer;
+  color: white;
+  background-color: #0099cc;
+  border-radius: 4px 4px 0 0;
+}
+
+/* collapsible trigger heading, sub-heading */
+h3, h4 {
+  margin: 0;
+  font-size: inherit;
+  font-weight: normal;
+}
+
+.Collapsible__trigger1:not(.open) {
+  border-radius: 4px;
+}
+
+.Collapsible__trigger1.shrink {
+  width: 80%; /* Shrink the details to 80% when RightPanel is open */
+}
+
+.Collapsible__trigger1 .collapse-text {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.Collapsible__trigger1 .collapse-icon {
+  /* just a little tweak to get it to optically align with the technique name's
+     close icon */
+  margin-right: 4px;
+}
+
+.collapsible-details1 {
+  --collapsible-details1-rhythm: calc(var(--gap) / 4);
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow: hidden;
+  padding: calc(var(--gap) * 0.8) var(--gap);
+  margin-left: 0;
+  margin-bottom: var(--v-rhythm);
+  border: 1px solid #ddd;
+  border-top: none;
+
+  line-height: 1.3;
+  background-color: #2b2d31;
+  color: white;
+}
+
+/* when the side drawer is open */
+.collapsible-details1.shrink {
+  width: 80%;
+}
+
+/* collapsible details ubheadings */
+h4 {
+  font-weight: bold;
+}
+.collapsible-details1 > div:not(:first-of-type) h4 {
+  margin-top: var(--gap);
+  margin-bottom: var(--collapsible-details1-rhythm);
+}
+
+.collapsible-details1 > div h4 {
+  margin-bottom: var(--collapsible-details1-rhythm);
+}
+
+/* most list content is formatted like paragraphs, with a little indent */
+.collapsible-details1-list > li {
+  list-style-type: disc;
+  margin-left: var(--gap);
+  border-bottom: none;
+}
+.collapsible-details1-list > li:not(:last-of-type) {
+  margin-bottom: calc(var(--gap) / 4);
+}
+
+/* references list is numbered */
+.collapsible-details1-references > li {
+  list-style-type: decimal;
+  border-bottom: none;
+}

src/components/ContentManager/ManageContent.jsx

@@ -400,7 +400,7 @@ const ManageContent = (props) => {
   return (
     <div>
       {/* Collapsible Technique Section */}
-      <section className="collapsible-section">
+      <section className="collapsible-section1">
         <div>
           {showFailAlert && (
             <Alert
@@ -428,7 +428,7 @@ const ManageContent = (props) => {
             </div>
           )}
           <div
-            className={`Collapsible__trigger ${openSections.technique ? 'open' : ''}`}
+            className={`Collapsible__trigger1 ${openSections.technique ? 'open' : ''}`}
             onClick={() => handleToggle('technique')}
           >
             <h4>Technique Description</h4>
@@ -440,7 +440,7 @@ const ManageContent = (props) => {
           </div>
 
           {openSections.technique && (
-            <div className="collapsible-details">
+            <div className="collapsible-details1">
               <form>
                 <div>
                   <label htmlFor="name" style={{ color: 'white', marginRight: '5px' }}>
@@ -470,7 +470,7 @@ const ManageContent = (props) => {
                 >
                   <h4 style={{ color: 'white' }}>Description</h4>
                   {fields.description.map((field, index) => (
-                    <div key={index} style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
+                    <div key={index} style={{ display: 'flex', alignItems: 'center', marginBottom: '10px', width: '100%' }}>
                       <textarea
                         value={field.value}
                         onChange={(e) => handleFieldChange('description', index, e)}
@@ -561,10 +561,10 @@ const ManageContent = (props) => {
       </section>
 
       {/* Collapsible Mitigation Section */}
-      <section className="collapsible-section">
+      <section className="collapsible-section1">
         <div>
           <div
-            className={`Collapsible__trigger ${openSections.mitigation ? 'open' : ''}`}
+            className={`Collapsible__trigger1 ${openSections.mitigation ? 'open' : ''}`}
             onClick={() => handleToggle('mitigation')}
           >
             <h4>Mitigation</h4>
@@ -576,18 +576,18 @@ const ManageContent = (props) => {
           </div>
 
           {openSections.mitigation && (
-            <div className="collapsible-details">
+            <div className="collapsible-details1">
               <form>{addKeyValue('mitigation')}</form>
             </div>
           )}
         </div>
       </section>
 
       {/* Collapsible Detection Section */}
-      <section className="collapsible-section">
+      <section className="collapsible-section1">
         <div>
           <div
-            className={`Collapsible__trigger ${openSections.detection ? 'open' : ''}`}
+            className={`Collapsible__trigger1 ${openSections.detection ? 'open' : ''}`}
             onClick={() => handleToggle('detection')}
           >
             <h4>Detection</h4>
@@ -599,18 +599,18 @@ const ManageContent = (props) => {
           </div>
 
           {openSections.detection && (
-            <div className="collapsible-details">
+            <div className="collapsible-details1">
               <form>{addKeyValue('detection')}</form>
             </div>
           )}
         </div>
       </section>
 
       {/* Collapsible References Section */}
-      <section className="collapsible-section">
+      <section className="collapsible-section1">
         <div>
           <div
-            className={`Collapsible__trigger ${openSections.references ? 'open' : ''}`}
+            className={`Collapsible__trigger1 ${openSections.references ? 'open' : ''}`}
             onClick={() => handleToggle('references')}
           >
             <h4>References</h4>
@@ -622,7 +622,7 @@ const ManageContent = (props) => {
           </div>
 
           {openSections.references && (
-            <div className="collapsible-details">
+            <div className="collapsible-details1">
               <form>{addKeyValue('references')}</form>
             </div>
           )}

src/components/TableContent/more_details.css

@@ -35,16 +35,14 @@ h3, h4 {
 }
 
 .Collapsible__trigger .collapse-icon {
-  /* just a little tweak to get it to optically align with the technique name's
-     close icon */
   margin-right: 4px;
 }
 
 .collapsible-details {
   --collapsible-details-rhythm: calc(var(--gap) / 4);
 
   display: flex;
-  flex-direction: column;
+  flex-direction: row;         
   justify-content: flex-start;
 
   box-sizing: border-box;
@@ -66,7 +64,7 @@ h3, h4 {
   width: 80%;
 }
 
-/* collapsible details ubheadings */
+/* collapsible details headings */
 h4 {
   font-weight: bold;
 }
@@ -79,12 +77,14 @@ h4 {
   margin-bottom: var(--collapsible-details-rhythm);
 }
 
-/* most list content is formatted like paragraphs, with a little indent */
+/* Most list content is formatted with a little indent */
 .collapsible-details-list > li {
   list-style-type: disc;
   margin-left: var(--gap);
   border-bottom: none;
+  margin-bottom: var(--gap); /* Add gap between <li> items */
 }
+
 .collapsible-details-list > li:not(:last-of-type) {
   margin-bottom: calc(var(--gap) / 4);
 }
@@ -95,8 +95,40 @@ h4 {
   border-bottom: none;
 }
 
+.collapsible-details {
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  box-sizing: border-box; 
+}
 
+/* Details section and circular progress section widths */
+.details-section1 {
+  width: 70%; /* 70% of the width */
+  padding-right: 20px; /* Optional: space between the sections */
+  box-sizing: border-box; /* Ensures padding is included in the width calculation */
+}
 
+.circular-progress-section {
+  width: 30%; /* 30% of the width */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-left: 20px; /* Optional: space between the sections */
+  box-sizing: border-box; /* Ensures padding is included in the width calculation */
+}
 
+/* Media Queries for responsive design */
+@media (max-width: 1024px) { /* Tablet and below */
+  .details-section1,
+  .circular-progress-section {
+    width: 50%; /* On medium screens, each section will take 50% */
+  }
+}
 
-
+@media (max-width: 600px) { /* Mobile and below */
+  .details-section1,
+  .circular-progress-section {
+    width: 100%; /* Each section takes 100% on mobile screens */
+  }
+}