HOTFIX: resource metadata aligment

src/app/recurso/[id]/components/metrics.js

@@ -33,7 +33,7 @@ export default function Specifications({ learningObject }) {
   return (
     <div className="flex flex-col p-1 text-main-text">
       <div className="font-bold text-lg">Métricas deste Recurso</div>
-      <div className="text-lg grid grid-cols-1 sm:grid-cols-2">
+      <div className="text-sm grid grid-cols-1 sm:grid-cols-2">
         {metricInfo.map(genMetric)}
       </div>
     </div>

src/app/recurso/[id]/components/specifications.js

@@ -7,19 +7,14 @@ import IconTheme from "@/app/MECRED_recursos_tematica.svg";
 
 const genSpecification = ({ icon, name, data }) => {
   return (
-    <div key={name} className="p-0 flex items-center">
-      <div className="p-2 text-main-text">
-        {icon}
-      </div>
-      <div className="text-main-text font-bold ">
-        {name}:
-      </div>
-      <div className="m-1 text-main-text">
-        {data}
-      </div>
+    <div key={name} className="flex items-start">
+      <div className="pt-2 text-main-text">{icon}</div>
+      <div className="p-2 text-main-text font-bold whitespace-nowrap">{name}:</div>
+      <div className="p-2 text-main-text">{data}</div>
     </div>
   );
-}
+};
+
 
 function formatSize(size) {
   if (size < 1000)
@@ -34,16 +29,16 @@ function formatSize(size) {
 export default function Specifications({ learningObject }) {
 
   const specInfo = [
-    { icon: <IconLocation />, enabled: true, name: "Idioma", data: learningObject.language.map((lang) => lang.name).join(", ") ?? "Não Informado" },
-    { icon: <IconLevel />, enabled: true, name: "Nível de Ensino", data: learningObject.educational_stages.map((stage) => stage.name).join(", ") },
-    { icon: <IconMedia />, enabled: true, name: "Tipo de Mídia", data: learningObject.object_type },
-    { icon: <IconTheme />, enabled: true, name: "Temática", data: learningObject.subjects.map((subject) => subject.name).join(", ") },
-    { icon: <IconSize />, enabled: !learningObject.link, name: "Tamanho", data: formatSize(learningObject?.attachments[0]?.size) },
+    { icon: <IconLocation className='mr-2'/>, enabled: true, name: "Idioma", data: learningObject.language.map((lang) => lang.name).join(", ") ?? "Não Informado" },
+    { icon: <IconLevel className='mr-2'/>, enabled: true, name: "Nível de Ensino", data: learningObject.educational_stages.map((stage) => stage.name).join(", ") },
+    { icon: <IconMedia style={{ transform: "scale(0.85)" }}/>, enabled: true, name: "Tipo de Mídia", data: learningObject.object_type },
+    { icon: <IconTheme className='mr-1'/>, enabled: true, name: "Temática", data: learningObject.subjects.map((subject) => subject.name).join(", ") },
+    { icon: <IconSize className='mr-2' style={{ transform: "scale(1.15)" }}/>, enabled: !learningObject.link, name: "Tamanho", data: formatSize(learningObject?.attachments[0]?.size) },
   ];
   return (
     <div className="flex flex-col p-1 text-main-text">
       <div className="font-bold text-lg">Especificações deste Recurso</div>
-      <div className="text-lg grid grid-cols-1 sm:grid-cols-2">
+      <div className="text-sm grid grid-cols-1 sm:grid-cols-2">
         {specInfo.filter(s => s.enabled).map(genSpecification)}
       </div>
     </div>