Merge pull request #551 from zihanKuang/improve-css

Style: Responsive Images/Figures & SCSS/Content Cleanup

Author: leecalcote

assets/scss/_styles_project.scss

@@ -122,6 +122,20 @@ body {
       border: 0;
     }
   }
+
+  img,
+  .md__image img,
+  img.md-image-responsive {
+    display: block;
+    width: 100%;
+    max-width: clamp(320px, 100%, 700px);
+    height: auto;
+    margin: 0 auto;
+    object-fit: contain;
+    box-sizing: border-box;
+  }
+
+  overflow-x: hidden;
 }
 
 // Links
@@ -166,7 +180,6 @@ a:not([href]):not([class]):hover {
     text-decoration: none;
     transition: color 0.2s;
     clip-path: polygon(100% 0, 100% 100%, 0.8em 100%, 0 50%, 0.8em 0);
-    clip-path: polygon(100% 0, 100% 100%, 0.8em 100%, 0 50%, 0.8em 0);
 
 
     &:hover {
@@ -456,67 +469,33 @@ a:not([href]):not([class]):hover {
   }
 }
 
-figure,
-figure[style*="width"] {
-  width: max-content !important;
-  max-width: 70% !important;
+.td-content figure,
+.td-content figure {
+  width: max-content;
+  max-width: clamp(320px, 100%, 700px);
   margin: 0 auto 2rem auto;
-
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
-
-  > img {
-    width: auto !important;
-    max-width: 100% !important;
-    height: auto;
-    object-fit: contain !important;
-    display: block;
-    margin: 0 auto;
-    border-radius: .5rem .5rem 0rem 0rem !important;
-    box-shadow: 0 0 0.5rem rgba(0, 179, 159, 0.4) !important;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  > figcaption {
-    width: 100% !important;
-    text-align: center;
-    padding: 0.5rem 1rem;
-    background-color: rgba($lightslategray, 1);
-    color: $dark;
-    border-radius: 0 0 .5rem .5rem;
-    box-sizing: border-box;
-  }
 }
 
-// Mobile: override for full-width content alignment
-@media (max-width: 600px) {
-  figure,
-  figure[style*="width"] {
-    max-width: 100% !important;
-    box-sizing: border-box;
-  }
-}
-
-.md__image img,
-img.md-image-responsive {
+.td-content figure > img {
   width: auto;
-  max-width: 70%;
-  max-height: 80vh;
-  height: auto;
-  display: block;
-  margin: 0 auto;
-  object-fit: contain;
+  max-width: 100%;
+  border-radius: .5rem .5rem 0 0;
+  box-shadow: 0 0 0.5rem rgba(0, 179, 159, 0.4);
+  transition: box-shadow 0.2s;
+}
 
-  @media (max-width: 600px) {
-    width: auto;
-    max-width: 100%;
-    padding: 0 1rem;
-    box-sizing: border-box;
-  }
+.td-content figure > figcaption {
+  width: 100%;
+  text-align: center;
+  padding: 0.5rem 1rem;
+  background-color: rgba($lightslategray, 1);
+  color: $dark;
+  border-radius: 0 0 .5rem .5rem;
+  box-sizing: border-box;
 }
 
 .dashboard {

content/en/kanvas/advanced/performance/index.md

@@ -47,7 +47,7 @@ Kanvas supports up to 1,000 relationships per design. Exceeding this limit can i
 
 Tags are indexed and searchable. However, the performance of design operations may degrade as the number of tags increases. To ensure an optimal user experience, we recommend using tags judiciously and limiting the number of tags used in a design.
 
-Upon loading a design exceeds that exceeds 20 tags within a single design, Kanvas will automatically disable grouping by tags. You can manually enable grouping by tags by clicking the “Group Components” button in the Designer dock. For more information, see [Working with Tags](/kanvas/designer/tagsets/).
+Upon loading a design exceeds that exceeds 20 tags within a single design, Kanvas will automatically disable grouping by tags. You can manually enable grouping by tags by clicking the "Group Components" button in the Designer dock. For more information, see [Working with Tags](/kanvas/designer/tagsets/).
 
 <!--
 #### Maximum Number of Relationships per Component
@@ -87,7 +87,7 @@ In the same way, as you toggle the evaluation of different types of relationship
 Using the Layers panel you control the level of sophistication or simplicity of the rendering of components and relationships in your designs. You can both simplify your design layout by removing unnecessary elements and improve performance simultaneously. Alternatively, you can increase the level of detail in your design by enabling additional layers and relationships, while controlling the balance between detail and performance.
 
 {{< alert type="info" title="Keep It Lightweight" >}}
-Hide layers you don’t need at the moment to keep your workspace lightweight and responsive.
+Hide layers you don't need at the moment to keep your workspace lightweight and responsive.
 {{< /alert >}}
 
 ### Optimize use of Images in your Design

content/en/kanvas/designer/comments/index.md

@@ -12,7 +12,7 @@ aliases:
 
 Kanvas's Designer enables you to place comments "inline" with your infrastructure as code. Use comments to offer feedback to team members, take detailed design notes, capture helpful tips for your team members, and include justification as to your infrastructure and application configuration decisions. Pay it forward to your future self by leaving historical record for reference later.
 
-<figure style="width:400px;">
+<figure>
   <img src="./kanvas-comment.png" alt="Comments in Designer" />
   <figcaption>Example of comments in Designer</figcaption>
 </figure>
@@ -28,7 +28,7 @@ You can add comments in a number of convenient ways. Since designs are public by
 1. Click on the comment icon in the toolbar to open a comment instantly. This is your go-to method for quick annotations without leaving your design or first identifying where you want to place your comment.
 2. You can also create a comment by dragging and dropping the comment icon from the Dock to your design. This method allows you to place comments directly on specific elements or areas of your design.
 
-<figure style="width:400px;">
+<figure>
 <img src="./comment-dock.png" alt="Create a comment from the Dock" />
   <figcaption>Create a comment from the Dock</figcaption>
 </figure>
@@ -37,7 +37,7 @@ You can add comments in a number of convenient ways. Since designs are public by
 
 Context-click on any area of your design, and from the contextual menu, select "Add a Comment". Using this context-click method allows for inline placement of your remarks right where you need them - *in context*.
 
-<figure style="width:400px;">
+<figure>
 <img src="./comment-canvas.png" alt="Comment by context-clicking on your design" />
   <figcaption>Comment by context-clicking on your design</figcaption>
 </figure>
@@ -48,7 +48,7 @@ Context-click on any area of your design, and from the contextual menu, select "
 
 ## Design review using comments
 
-<figure style="width:400px;">
+<figure>
   <img src="./conversation-screenshot.png" alt="Peer review using comments in Designer" />
   <figcaption>Peer review using comments in Designer</figcaption>
 </figure>
@@ -79,7 +79,7 @@ You can also reopen comments.
 
 ### View Comment History
 
-<figure style="width:400px;">
+<figure>
   <img src="./comments-conversation.gif" alt="View comment history" />
   <figcaption>View comment history</figcaption>
 </figure>
@@ -123,7 +123,7 @@ Learn more about [sharing settings](/kanvas/designer/sharing).
 
 - **Right-click and Copy**: Choose **Copy** to manually paste it later.
 
-  <figure style="width:400px;">
+  <figure>
     <img src="./comment-copy.gif" alt="Copy a comment" />
     <figcaption>Copy a comment</figcaption>
   </figure>
@@ -158,7 +158,7 @@ Kanvas auto-generates comment names, useful for quick feedback. When duplicating
 You can temporarily hide or reveal open comments using the Layers panel—just like toggling layers in Photoshop.  
 This helps you focus on the most important parts of your design and improves clarity during reviews.
 
-<figure style="width:400px;">
+<figure>
   <img src="./comments-hide.png" alt="Hide comments using Layers" />
   <figcaption>Hide comments using the Layers panel</figcaption>
 </figure>
@@ -171,8 +171,9 @@ Want to improve the performance of your workspace? [Learn more about using the L
 
 If you plan to keep certain comments in your design for documentation, team reference, or historical context, it's a good idea to give them meaningful names. This simple habit improves clarity for both you and your team—especially when reviewing or revisiting designs later.
 
-<figure style="width:400px;">
+<figure>
   <img src="./naming-comments.png" alt="Naming a comment in Designer" />
+    <figcaption>Naming a comment in Designer</figcaption>
 </figure>
 
 {{< alert type="info" title="Best Practice" >}}
@@ -186,7 +187,7 @@ If a comment is resolved by mistake, it can be reopened. Adding a new comment to
 
 Follow the steps below to reopen a comment:
 
-<figure style="width:400px;">
+<figure>
 <img src="./comments-unresolved.gif" alt="Unresolving comments in designer" />
   <figcaption>Unresolving comments in designer</figcaption>
 </figure>
@@ -195,7 +196,7 @@ Follow the steps below to reopen a comment:
 
 Each time that a new comment is made in a design, remark placed into existing comment, a comment is resolved or reopened, you and your collaborators might receive notification via email.
 
-<figure style="width:400px;">
+<figure>
 <img src="./example-notification-email.png" alt="Example email notification received when design comment is made" />
   <figcaption>Example email notification received when design comment is made.</figcaption>
 </figure>
@@ -214,14 +215,14 @@ Customize your [notification preferences](/cloud/identity/users/notification-pre
 
 Customize your notification preferences to mute email notifications for comments on your design. With notifications for new comments silenced, you won't receive email notifications for new comments on your design. This can be useful if you want to temporarily pause notifications or reduce email clutter.
 
-<figure style="width:400px;">
+<figure>
   <img src="./comment-notificationBell.png" alt="Turn Off notification from comments in designer" style="width:auto">
   <figcaption>Example of comments in Designer</figcaption>
 </figure>
 
 You can also manage all your comment notification settings centrally through the **Cloud -> Account -> [Preference](https://docs.layer5.io/cloud/identity/users/notification-preferences/)**.
 
-<figure style="width:400px;">
+<figure>
   <img src="./comment-cloud-manage.png" alt="Manage comment notifications in the Cloud Portal" style="width:auto">
   <figcaption>Manage all comment notifications centrally in the Cloud</figcaption>
 </figure>