fix style

Author: lbeurerkellner

docs/assets/invariant.css

@@ -368,8 +368,6 @@ label.md-nav__title {
     justify-content: center;
     padding: 5pt 20pt;
     align-items: center;
-    margin-top: 30pt;
-    margin-bottom: 140pt;
 }
 
 .overview .box {
@@ -418,24 +416,31 @@ label.md-nav__title {
     padding-top: 20pt;
 }
 
-.overview .offline {
+.offline {
     border: 1pt dashed var(--primary-blue);
-    width: calc(100%);
-    height: 90pt;
-    position: absolute;
-    top: calc(100% + 20pt);
+    width: calc(62.5%);
     left: -1pt;
     z-index: 0;
     border-radius: 4pt;
 
     display: flex;
+    flex-wrap: wrap;
     flex-direction: row;
     padding: 4pt;
     padding-left: 0pt;
-    padding-top: 20pt;
+    padding-top: 7pt;
+    align-items: flex-start;
+    justify-content: flex-start;
 }
 
-.overview .offline hr {
+.offline .box {
+    width: auto;
+    flex: 1;
+    min-width: 120pt;
+    margin-bottom: 5pt;
+}
+
+.offline hr {
     width: 160%;
     position: absolute;
     top: -25pt;
@@ -468,6 +473,7 @@ label.md-nav__title {
     margin: 0pt;
     white-space: nowrap;
     text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 .overview .box p {
@@ -501,6 +507,7 @@ label.md-nav__title {
     border: none;
     padding: 0pt;
     display: flex;
+    width: 65%;
 }
 
 .overview .box.main:hover {

docs/index.md

@@ -70,7 +70,7 @@ print(response.messages[-1]["content"])
 
 With this code, your agent is automatically tracked and all execution traces will be logged in a designated dataset on the <img class='inline-invariant' src="assets/logo.svg"/> [Invariant Explorer](https://explorer.invariantlabs.ai).
 
-This enables you to analyze, debug and ensure the security of your agentic system, during development and operation. It also opens up your agent to the Invariant family of tools, allowing you to [observe and debug](./explorer/) your agent, [test it](testing/), and [analyze it for security vulnerabilities](https://github.com/invariantlabs-ai/invariant?tab=readme-ov-file#analyzer).
+Overall, this integration opens up your agent to the Invariant family of tools, allowing you to [observe and debug](./explorer/) your agent, [test it](testing/), and [analyze it for security vulnerabilities](https://github.com/invariantlabs-ai/invariant?tab=readme-ov-file#analyzer).
 
 In the next sections, we will introduce the Invariant eco-system and how to get started with it.
 
@@ -98,30 +98,37 @@ You can use each tool independently, or in combination with each other. The foll
                 <i class='more'>→</i>
             </div>
         </div> -->
-        <div class='offline'>
-            <hr/>
-            <div class='title'>Trace Analysis</div>
-            <a class='box fill clear' href='./explorer'>
-                <p>Explorer</p>
-                <i>Trace viewing and debugging</i>
-                <i class='more'>→</i>
-            </a>
-            <a class='box fill clear' href='./testing'>
-                <p>Testing</p>
-                <i>Agent Unit Testing</i>
-                <i class='more'>→</i>
-            </a>
-            <a class='box fill clear' href='https://github.com/invariantlabs-ai/invariant?tab=readme-ov-file#analyzer'>
-                <p>Analyzer</p>
-                <i>Agent Security Scanner</i>
-                <i class='more'>→</i>
-            </a>
-        </div>
     </div>
     <div class='clear box thirdparty'>
         LLM Provider
     </div>
 </div>
+<div class='overview'>
+    <div class='clear box thirdparty hidden'>
+        Agent
+    </div>
+    <div class='offline'>
+        <div class='title'>Trace Analysis</div>
+        <a class='box fill clear' href='./explorer'>
+            <p>Explorer</p>
+            <i>Trace viewing</i>
+            <i class='more'>→</i>
+        </a>
+        <a class='box fill clear' href='./testing'>
+            <p>Testing</p>
+            <i>Agent Unit Testing</i>
+            <i class='more'>→</i>
+        </a>
+        <a class='box fill clear' href='https://github.com/invariantlabs-ai/invariant?tab=readme-ov-file#analyzer'>
+            <p>Analyzer</p>
+            <i>Agent Security Scanner</i>
+            <i class='more'>→</i>
+        </a>
+    </div>
+    <div class='clear box thirdparty hidden'>
+        LLM Provider
+    </div>
+</div>
 
 You can click any of the boxes to learn more about the respective tool.