Fixed Styles and Spacing issues in interpreting-meshery-designs

Signed-off-by: krishnaShuk <shuklakrishna.kris@gmail.com>

Author: KrishnaShuk

content-learn/mastering-meshery/introduction-to-meshery/meshery/interpreting-meshery-designs.mdx

@@ -96,6 +96,9 @@ Let's explore a few of these categories.
       src={Triangles}
       align="center"
       width="25%"
+      style={{
+         objectFit: 'contain !important',
+      }}
     />
 
     - **Category**: **Networking and Service Management**.
@@ -105,12 +108,15 @@ Let's explore a few of these categories.
     - **Examples**: API Service, Service.
 
 
-1. **Rectangles**:
+2. **Rectangles**:
 
     <img
       src={Rectangles}
       align="center"
       width="25%"
+      style={{
+         objectFit: 'contain !important',
+      }}
     />
 
     - **Category**: **Hierarchical and Parent Components**
@@ -121,12 +127,15 @@ Let's explore a few of these categories.
 
     - **Examples**: Namespace, Node, Pod, ReplicaSet, DaemonSet, Horizontal Pod Autoscaler.
 
-1. **User Icons**:
+3. **User Icons**:
 
     <img
       src={Users}
       align="center"
       width="25%"
+      style={{
+         objectFit: 'contain !important',
+      }}
     />
 
     - **Category**: **Role-based access control (RBAC) components**
@@ -135,12 +144,15 @@ Let's explore a few of these categories.
 
     - **Examples**: ClusterRole, Role, Service Account etc.
 
-1. **Cylinders**:
+4. **Cylinders**:
 
     <img
       src={Cylinders}
       align="center"
       width="25%"
+      style={{
+         objectFit: 'contain !important',
+      }}
     />
 
     - **Category**: **Storage and Stateful Components**
@@ -166,6 +178,9 @@ Note that users have the flexibility to **customize** these arrow styles to suit
   src={DashedArrows}
   align="center"
   width="25%"
+  style={{
+         objectFit: 'contain !important',
+  }}
 />
 
 These are used to indicate traffic flow and relationships between components. The dashed lines represent dynamic interactions and data movement, while the arrowheads show the direction of the flow or relationship.
@@ -176,6 +191,9 @@ These are used to indicate traffic flow and relationships between components. Th
   src={AnnotationArrow}
   align="center"
   width="25%"
+  style={{
+         objectFit: 'contain !important',
+  }}
 />
 
 These are used to denote annotations or static connections between components. They serve to illustrate fixed relationships or highlight specific details without implying a flow of data or interaction.
@@ -188,6 +206,9 @@ These are used to denote annotations or static connections between components. T
   src={NetworkEdgeRelationship}
   align="center"
   width="50%"
+  style={{
+         objectFit: 'contain !important',
+  }}
 />
 
 - **Dashed arrow**: Indicates that the service is linked to the pod, exposing network access to it through a specified port.
@@ -208,12 +229,19 @@ The intermediary component (such as a RoleBinding) connects the two, defining ho
   src={EdgePermissions}
   align="center"
   width="50%"
+  style={{
+         objectFit: 'contain !important',
+  }}
 />
 
 **Creating Edge-Permission Relationships Between Components**
 
 <a href={edgePermissionGif}>
-  <img src={edgePermissionGif} width="100%" align="center" />
+  <img src={edgePermissionGif} width="100%" align="center" 
+  style={{
+         objectFit: 'contain !important',
+  }}
+  />
 </a>
 
 
@@ -233,6 +261,7 @@ In Meshery, these integrated components are distinctly represented by their spec
   style={{ 
     marginTop: '20px', 
     marginBottom: '20px', 
+    objectFit: 'contain !important',
   }} 
 />
 <h5 class="chapter-sub-heading">_Example of integration components in Meshery_</h5>
@@ -271,7 +300,11 @@ Annotations can be created using Meshery's Diagramming tools found in the dock a
 1. **Images**:  Images can be added to the design to represent components, logos, or any visual aid that supports understanding the architecture.
 
 <a href={AnnotationExampleGif}>
-  <img src={AnnotationExampleGif} width="100%" align="center" />
+  <img src={AnnotationExampleGif} width="100%" align="center" 
+  style={{
+         objectFit: 'contain !important',
+  }}
+  />
 </a>
 
 
@@ -292,14 +325,22 @@ While default shapes, colors, and icons are provided for components and annotati
 **Customizing Kubernetes Components**
 
 <a href={CustomizeKubernetesGif}>
-  <img src={CustomizeKubernetesGif} width="100%" align="center" />
+  <img src={CustomizeKubernetesGif} width="100%" align="center" 
+  style={{
+         objectFit: 'contain !important',
+  }}
+  />
 </a>
 
 
 **Creating and Customizing Arrow Annotations**
 
 <a href={CreateAnnotationGif}>
-  <img src={CreateAnnotationGif} width="100%" align="center" />
+  <img src={CreateAnnotationGif} width="100%" align="center" 
+  style={{
+         objectFit: 'contain !important',
+  }}
+  />
 </a>
 
 

src/components/Learn-Components/Chapters-Style/chapters.style.js

@@ -17,4 +17,9 @@ export const ChapterStyle = styled.div`
     }
   }
   }
+
+  div[style*="width:100%"][style*="height:auto"] {
+    aspect-ratio: unset !important;
+    margin: 20px;
+  }
 `;