Refactor comment metadata display in Velt components for improved readability

- Updated CSS for comment metadata to use flexible layout properties for better alignment.
- Simplified JSX structure in VeltCommentDialogWf, VeltCommentsSidebarFocusedThreadWf, and VeltInlineCommentsSectionWf by removing redundant class names for cleaner code.

Author: velt-sdk

apps/react/comments/dashboard/self-hosting/dashboard-postgres-demo/components/velt/ui-customization/VeltCommentDialogWf.tsx

@@ -83,10 +83,10 @@ const VeltCommentDialogWf = () => {
                                         <div className="oe-comment--metadata">
                                             <MarkRead width={16} height={16} />
                                             <span className="oe-comment--metadata-label">Line:</span>
-                                            <span className="oe-comment--metadata-label"><VeltData field="annotation.context.lineItemDescription" /></span>
+                                            <span><VeltData field="annotation.context.lineItemDescription" /></span>
                                             <span className="oe-comment--metadata-label">-</span>
-                                            <span className="oe-comment--metadata-label"><VeltData field="annotation.context.lineItemCurrency" /></span>
-                                            <span className="oe-comment--metadata-label"><VeltData field="annotation.context.lineItemAmount" /></span>
+                                            <span><VeltData field="annotation.context.lineItemCurrency" /></span>
+                                            <span><VeltData field="annotation.context.lineItemAmount" /></span>
                                         </div>
                                     </VeltIf>
                                     <VeltCommentDialogWireframe.ThreadCard.Message />

apps/react/comments/dashboard/self-hosting/dashboard-postgres-demo/components/velt/ui-customization/VeltCommentsSidebarFocusedThreadWf.tsx

@@ -38,10 +38,10 @@ const VeltCommentsSidebarFocusedThreadWf = () => {
                     <div className="oe-comment--metadata">
                         <MarkRead width={16} height={16} />
                         <span className="oe-comment--metadata-label">Line:</span>
-                        <span className="oe-comment--metadata-label"><VeltData field="focusedAnnotation.context.lineItemDescription" /></span>
+                        <span><VeltData field="focusedAnnotation.context.lineItemDescription" /></span>
                         <span className="oe-comment--metadata-label">-</span>
-                        <span className="oe-comment--metadata-label"><VeltData field="focusedAnnotation.context.lineItemCurrency" /></span>
-                        <span className="oe-comment--metadata-label"><VeltData field="focusedAnnotation.context.lineItemAmount" /></span>
+                        <span><VeltData field="focusedAnnotation.context.lineItemCurrency" /></span>
+                        <span><VeltData field="focusedAnnotation.context.lineItemAmount" /></span>
                         <div className="oe-metadata-close">
                             <VeltCommentsSidebarWireframe.FocusedThread.BackButton>
                                 <div className="oe-btn-padding-sm">

apps/react/comments/dashboard/self-hosting/dashboard-postgres-demo/components/velt/ui-customization/VeltInlineCommentsSectionWf.tsx

@@ -24,10 +24,10 @@ const VeltInlineCommentsSectionWf = () => {
                 <div className="oe-comment--metadata">
                     <MarkRead width={16} height={16} />
                     <span className="oe-comment--metadata-label">Line:</span>
-                    <span className="oe-comment--metadata-label"><VeltData field="context.lineItemDescription" /></span>
+                    <span><VeltData field="context.lineItemDescription" /></span>
                     <span className="oe-comment--metadata-label">-</span>
-                    <span className="oe-comment--metadata-label"><VeltData field="context.lineItemCurrency" /></span>
-                    <span className="oe-comment--metadata-label"><VeltData field="context.lineItemAmount" /></span>
+                    <span><VeltData field="context.lineItemCurrency" /></span>
+                    <span><VeltData field="context.lineItemAmount" /></span>
                     <div className="oe-metadata-close">
                         <VeltButtonWireframe id="close-sidebar" type="button">
                             <div className="oe-btn-padding-sm">

apps/react/comments/dashboard/self-hosting/dashboard-postgres-demo/components/velt/ui-customization/styles.css

@@ -298,7 +298,7 @@ app-comment-dialog-toggle-reply-text {
 
 .oe-comment--metadata span {
   /* This is the magic combo for ellipsis */
-  flex: 1;
+  flex: 0 1 auto;
   min-width: 0;
   white-space: nowrap;
   overflow: hidden;