feedback

Author: oshaikh13

src/AppContent.jsx

@@ -42,7 +42,7 @@ const AppContent = ({ suggestionsData, activeChats, setActiveChats }) => {
   return (
     <div
       className="app-container"
-      style={{ display: 'flex', position: 'relative', height: '700px' }}
+      style={{ display: 'flex', position: 'relative', height: '500px' }}
     >
       {isSidebarOpen && (
         <Navbar

src/components/Carousel.jsx

@@ -21,48 +21,75 @@ const AnimatedRow = ({ row, rowIndex }) => {
             <div
               key={card.id}
               style={{
-                display: 'flex',
-                alignItems: 'center',
-                backgroundColor: 'var(--color-main-text)',
-                borderRadius: '8px',
-                padding: '10px',
-                paddingTop: '3px',
-                paddingBottom: '3px',
+                position: 'relative',
                 marginRight: '10px',
-                paddingRight: '0px',
                 flex: '0 0 275px',
                 marginLeft: isFirstCardInSecondRow ? '132px' : '0'
               }}
             >
+              {/* Proposition-Confidence Label */}
               <div
                 style={{
-                  width: '220px',
-                  color: '#333',
-                  fontFamily: 'sans-serif',
-                  fontSize: '16px',
-                  lineHeight: '1.2'
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  marginBottom: '4px',
+                  fontSize: '12px',
+                  marginLeft: '6px',
+                  marginRight: '6px',
+                  color: 'var(--color-main-text)',
+                  opacity: 0.7
                 }}
               >
-                {card.text}
+                <span>Proposition</span>
+                <span>Confidence</span>
               </div>
+              {/* Card Content */}
               <div
                 style={{
-                  width: '1px',
-                  backgroundColor: '#888888',
-                  height: '40px',
-                  margin: '0 2px'
-                }}
-              ></div>
-              <div
-                style={{
-                  flex: 1,
-                  fontWeight: 'bold',
-                  fontSize: '17px',
-                  color: '#333',
-                  textAlign: 'center'
+                  display: 'flex',
+                  alignItems: 'center',
+                  backgroundColor: 'var(--color-main-text)',
+                  borderRadius: '8px',
+                  padding: '10px',
+                  paddingTop: '3px',
+                  paddingBottom: '3px',
+                  paddingRight: '0px',
+                  height: '60px',
+                  boxSizing: 'border-box'
                 }}
               >
-                {card.value}
+                <div
+                  style={{
+                    width: '220px',
+                    color: '#333',
+                    fontFamily: 'sans-serif',
+                    fontSize: '16px',
+                    lineHeight: '1.2',
+                    height: '40px',
+                    overflow: 'hidden'
+                  }}
+                >
+                  {card.text}
+                </div>
+                <div
+                  style={{
+                    width: '1px',
+                    backgroundColor: '#888888',
+                    height: '40px',
+                    margin: '0 2px'
+                  }}
+                ></div>
+                <div
+                  style={{
+                    flex: 1,
+                    fontWeight: 'bold',
+                    fontSize: '17px',
+                    color: '#333',
+                    textAlign: 'center'
+                  }}
+                >
+                  {card.value}
+                </div>
               </div>
             </div>
           );
@@ -72,47 +99,74 @@ const AnimatedRow = ({ row, rowIndex }) => {
             <div
               key={`${card.id}-dup`}
               style={{
-                display: 'flex',
-                alignItems: 'center',
-                backgroundColor: 'var(--color-main-text)',
-                borderRadius: '8px',
-                padding: '10px',
-                paddingTop: '3px',
-                paddingBottom: '3px',
+                position: 'relative',
                 marginRight: '10px',
-                paddingRight: '0px',
                 flex: '0 0 275px'
               }}
             >
+              {/* Proposition-Confidence Label */}
               <div
                 style={{
-                  width: '220px',
-                  color: '#333',
-                  fontFamily: 'sans-serif',
-                  fontSize: '16px',
-                  lineHeight: '1.2'
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  marginBottom: '4px',
+                  marginLeft: '6px',
+                  marginRight: '6px',
+                  fontSize: '12px',
+                  color: 'var(--color-main-text)',
+                  opacity: 0.7
                 }}
               >
-                {card.text}
+                <span>Proposition</span>
+                <span>Confidence</span>
               </div>
+              {/* Card Content */}
               <div
                 style={{
-                  width: '1px',
-                  backgroundColor: '#888888',
+                  display: 'flex',
+                  alignItems: 'center',
+                  backgroundColor: 'var(--color-main-text)',
+                  borderRadius: '8px',
+                  padding: '10px',
+                  paddingTop: '3px',
+                  paddingBottom: '3px',
+                  paddingRight: '0px',
                   height: '60px',
-                  margin: '0 2px'
-                }}
-              ></div>
-              <div
-                style={{
-                  flex: 1,
-                  fontWeight: 'bold',
-                  fontSize: '17px',
-                  color: '#333',
-                  textAlign: 'center'
+                  boxSizing: 'border-box'
                 }}
               >
-                {card.value}
+                <div
+                  style={{
+                    width: '220px',
+                    color: '#333',
+                    fontFamily: 'sans-serif',
+                    fontSize: '16px',
+                    lineHeight: '1.2',
+                    height: '40px',
+                    overflow: 'hidden'
+                  }}
+                >
+                  {card.text}
+                </div>
+                <div
+                  style={{
+                    width: '1px',
+                    backgroundColor: '#888888',
+                    height: '60px',
+                    margin: '0 2px'
+                  }}
+                ></div>
+                <div
+                  style={{
+                    flex: 1,
+                    fontWeight: 'bold',
+                    fontSize: '17px',
+                    color: '#333',
+                    textAlign: 'center'
+                  }}
+                >
+                  {card.value}
+                </div>
               </div>
             </div>
           );
@@ -161,7 +215,7 @@ const Carousel = ({ carouselData }) => {
         style={{
           color: 'var(--color-main-text)',
           textAlign: 'left',
-          marginBottom: '20px',
+          marginBottom: '12px',
           fontSize: '1.5em',
         }}
       >