kyd-shared-badge 0.3.126 → 0.3.127

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.126",
+  "version": "0.3.127",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/SharedBadgeDisplay.tsx

@@ -217,7 +217,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false,
         {/* Quadrant layout */}
         <div className={'grid grid-cols-1 md:grid-cols-2 gap-6'}>
           {/* Top-left: Name, countries, badge image handled by ReportHeader */}
-          <div className={`${hasEnterpriseMatch ? '' : 'md:col-span-2'}`}>
+          <div className={`${hasEnterpriseMatch ? 'h-full' : 'md:col-span-2'}`}>
             <ReportHeader 
               badgeId={badgeId}
               developerName={badgeData.developerName}

package/src/components/ReportHeader.tsx

@@ -77,7 +77,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
   
   return (
     <div
-      className={'p-6 rounded-md border'}
+      className={'p-6 rounded-md border h-full'}
       style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', backgroundImage: `linear-gradient(${tint}, ${tint})` }}
     >
       {(() => {
@@ -99,7 +99,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
           </div>
         );
       })()}
-      <div className={`flex gap-3 ${rightBadgeLayout ? 'flex-row items-center justify-between' : 'flex-col'}`}>
+      <div className={`flex gap-3 ${rightBadgeLayout ? 'flex-row items-center justify-between' : 'flex-col h-full'}`}>
         {/* Info section: Title, Candidate, Details and Summary */}
         <div className={`w-full ${rightBadgeLayout ? 'md:flex-1' : ''}`}>
           <div className='space-y-1'>
@@ -139,7 +139,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
               {sources.length > 0 && (
                 <p className='flex items-center gap-2 mt-2 text-sm'>
                   <a href="#appendix-connected" className={'inline-flex items-center gap-2 group'} style={{ color: 'var(--text-secondary)' }}>
-                    <span className={'font-semibold'}>Sources:</span>
+                    <span className={'font-semibold'}>Sources Shared:</span>
                     <span className={'flex items-center gap-2'}>
                       {sources.map((provider, idx) => (
                         <span key={`${provider}-${idx}`} className={'text-sm'} style={{ color: 'var(--text-main)' }}>
@@ -187,8 +187,8 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
         </div>
 
         {/* Badge Image with robust centered overlay */}
-        <div className={`flex items-center ${rightBadgeLayout ? 'md:justify-end h-20' : 'justify-center w-full mt-4'} `}>
-          <div className={`relative w-full ${rightBadgeLayout ? 'max-w-[85px]' : 'px-28'} select-none`}>
+        <div className={`flex items-center ${rightBadgeLayout ? 'md:justify-end h-20' : 'justify-center w-full h-full mt-4'} `}>
+          <div className={`relative w-full ${rightBadgeLayout ? 'max-w-[85px]' : 'px-24 sm:px-6 lg:px-12 xl:px-28'} select-none`}>
             <Image 
               src={finalBadgeImageUrl} 
               alt="KYD Badge" 
@@ -198,7 +198,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
               className='w-full h-auto pointer-events-none'
             />
             <div className={`pointer-events-none absolute left-1/2  -translate-x-1/2 -translate-y-1/2 ${rightBadgeLayout ? 'top-[72%]' : 'top-[69%]'}`}>
-              <div className={`font-extrabold text-black ${rightBadgeLayout ? 'text-xs' : 'text-3xl'}`}>
+              <div className={`font-extrabold text-black ${rightBadgeLayout ? 'text-xs' : 'text-base sm:text-2xl md:text-2xl lg:text-3xl'}`}>
                 {Math.round(score || 0)}%
               </div>
             </div>

package/src/components/SkillsAppendixTable.tsx

@@ -56,7 +56,13 @@ const SkillsAppendixTable = ({ skillsAll }: { skillsAll?: SkillsAll }) => {
         <div key={cat}>
           <h5 id={`appendix-skills-cat-${slugify(cat)}`} className={'text-base font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>{cat}</h5>
           <div className={'overflow-auto rounded-lg border'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
-            <table className="min-w-full text-sm">
+            <table className="min-w-full text-sm" style={{ tableLayout: 'fixed', width: '100%' }}>
+              <colgroup>
+                <col style={{ width: '40%' }} />
+                <col style={{ width: '20%' }} />
+                <col style={{ width: '20%' }} />
+                <col style={{ width: '20%' }} />
+              </colgroup>
               <thead>
                 <tr style={{ backgroundColor: 'var(--content-card-background)' }}>
                   <th className="text-left p-3" style={{ color: 'var(--text-secondary)' }}>Skill</th>