From 5bf6d00e350445b58c60c3950d1f28139e42a6b3 Mon Sep 17 00:00:00 2001
From: Timon Back <timonback@users.noreply.github.com>
Date: Sat, 10 Aug 2024 13:34:12 +0200
Subject: [PATCH 1/3] feat(ui): improve breaking of navigation name

---
 .../new/sidenav/sidenav.component.html        | 10 +++++---
 .../new/sidenav/sidenav.component.ts          | 23 +++++++++++--------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/springwolf-ui/src/app/components/new/sidenav/sidenav.component.html b/springwolf-ui/src/app/components/new/sidenav/sidenav.component.html
index bded2d52b..f8dffde6e 100644
--- a/springwolf-ui/src/app/components/new/sidenav/sidenav.component.html
+++ b/springwolf-ui/src/app/components/new/sidenav/sidenav.component.html
@@ -11,7 +11,7 @@
           <mat-icon *ngIf="link.icon" fontIcon="{{ link.icon }}" />
           <b>
             <a [href]="link.href">
-              {{ link.name }}
+              @for (linkEl of link.name; track linkEl) {{{linkEl}}&#x200B;}
             </a>
           </b>
         </span>
@@ -24,7 +24,8 @@
           >
             <span>
               <a [href]="child.href">
-                {{ child.name }}
+                @for (linkEl of child.name; track linkEl)
+                {{{linkEl}}&#x200B;}
               </a>
               @for (childTag of child.tags; track childTag) {
               <span class="badge {{ childTag }}-badge">{{ childTag }}</span>
@@ -41,7 +42,10 @@
                 }"
               >
                 <span>
-                  <a [href]="subchild.href"> {{ subchild.name }}</a>
+                  <a [href]="subchild.href">
+                    @for (linkEl of subchild.name; track linkEl)
+                    {{{linkEl}}&#x200B;}
+                  </a>
 
                   @for (subChildTag of subchild.tags; track subChildTag) {
                   <span class="badge {{ subChildTag }}-badge">{{
diff --git a/springwolf-ui/src/app/components/new/sidenav/sidenav.component.ts b/springwolf-ui/src/app/components/new/sidenav/sidenav.component.ts
index 3f1099fe4..a81466ebe 100644
--- a/springwolf-ui/src/app/components/new/sidenav/sidenav.component.ts
+++ b/springwolf-ui/src/app/components/new/sidenav/sidenav.component.ts
@@ -14,7 +14,7 @@ import { AsyncApiMapperService } from "../../../service/asyncapi/asyncapi-mapper
 import { Location } from "@angular/common";
 
 interface NavigationEntry {
-  name: string;
+  name: string[];
   icon?: string;
   href: string | undefined;
   selected?: boolean;
@@ -47,7 +47,7 @@ export class SidenavComponent implements OnInit, AfterViewInit {
       const newNavigation: NavigationEntry[] = [];
 
       newNavigation.push({
-        name: "Info",
+        name: ["Info"],
         icon: "info",
         href: AsyncApiMapperService.BASE_URL + "info",
       });
@@ -55,21 +55,21 @@ export class SidenavComponent implements OnInit, AfterViewInit {
       const servers: NavigationEntry[] = Array.from(
         asyncapi.servers.keys()
       ).map((key) => ({
-        name: key,
+        name: this.splitForWordBreaking(key),
         href:
           AsyncApiMapperService.BASE_URL +
           asyncapi.servers.get(key)!.anchorIdentifier,
         tags: [asyncapi.servers.get(key)!.protocol],
       }));
       newNavigation.push({
-        name: "Servers",
+        name: ["Servers"],
         icon: "dns",
         href: AsyncApiMapperService.BASE_URL + "servers",
         children: servers,
       });
 
       const channels = {
-        name: "Channels & Operations",
+        name: ["Channels & Operations"],
         icon: "swap_vert",
         href: AsyncApiMapperService.BASE_URL + "channels",
         children: [] as NavigationEntry[],
@@ -77,7 +77,7 @@ export class SidenavComponent implements OnInit, AfterViewInit {
       asyncapi.channels.forEach((value) => {
         let children = value.operations.map((operation) => {
           return {
-            name: operation.operation.message.title,
+            name: this.splitForWordBreaking(operation.operation.message.title),
             href: AsyncApiMapperService.BASE_URL + operation.anchorIdentifier,
             tags: [operation.operation.operationType],
           };
@@ -87,7 +87,7 @@ export class SidenavComponent implements OnInit, AfterViewInit {
           .flatMap((tags) => tags);
 
         const channel = {
-          name: value.name,
+          name: this.splitForWordBreaking(value.name),
           href: AsyncApiMapperService.BASE_URL + value.anchorIdentifier,
           tags: Array.from(new Set(tags)).sort(),
           children: children,
@@ -98,14 +98,14 @@ export class SidenavComponent implements OnInit, AfterViewInit {
       newNavigation.push(channels);
 
       const schemas = {
-        name: "Schemas",
+        name: ["Schemas"],
         icon: "schema",
         href: AsyncApiMapperService.BASE_URL + "schemas",
         children: [] as NavigationEntry[],
       };
       asyncapi.components.schemas.forEach((value) => {
         schemas.children.push({
-          name: value.title,
+          name: this.splitForWordBreaking(value.title),
           href: AsyncApiMapperService.BASE_URL + "" + value.anchorIdentifier,
         });
       });
@@ -117,6 +117,11 @@ export class SidenavComponent implements OnInit, AfterViewInit {
     });
   }
 
+  private splitForWordBreaking = (text: string) => {
+    // Split by set of characters, but keep separators
+    return text.split(/(?<=[.,-_/])/);
+  };
+
   ngAfterViewInit() {
     this.scrollableElement.nativeElement.addEventListener(
       "scroll",

From 02240190f8e5d1d854ed5ecc7d6c21998aa325b7 Mon Sep 17 00:00:00 2001
From: Timon Back <timonback@users.noreply.github.com>
Date: Sat, 10 Aug 2024 13:35:06 +0200
Subject: [PATCH 2/3] feat(ui): improve layout

Taken from #909 by hirth-abi
---
 .../src/app/components/new/sidenav/sidenav.component.css    | 4 ++--
 springwolf-ui/src/main.css                                  | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/springwolf-ui/src/app/components/new/sidenav/sidenav.component.css b/springwolf-ui/src/app/components/new/sidenav/sidenav.component.css
index 4813a03c5..763772e5d 100644
--- a/springwolf-ui/src/app/components/new/sidenav/sidenav.component.css
+++ b/springwolf-ui/src/app/components/new/sidenav/sidenav.component.css
@@ -27,8 +27,8 @@ a {
   font-size: smaller;
 
   border-radius: 0.3em;
-  padding: 0 0.1em;
-  margin: 0 0 auto 0;
+  padding: 0 0.2em;
+  margin: 0.2em 0.3em auto 0.3em;
 }
 .sidenav .badge.send-badge {
   color: var(--springwolf-badge-color-send);
diff --git a/springwolf-ui/src/main.css b/springwolf-ui/src/main.css
index a0742e304..2dc041944 100644
--- a/springwolf-ui/src/main.css
+++ b/springwolf-ui/src/main.css
@@ -8,7 +8,7 @@ body {
 }
 
 a {
-  word-break: break-all;
+  overflow-wrap: break-word;
   max-width: 100%;
 }
 
@@ -227,6 +227,10 @@ a {
   }
 }
 
+.mat-icon {
+  vertical-align: middle;
+}
+
 html {
   --springwolf-badge-color-send: black;
   --springwolf-badge-color-background-send: #ffd580;

From ebebbe32e8415a34fae84a251fc63bdafa67239d Mon Sep 17 00:00:00 2001
From: Timon Back <timonback@users.noreply.github.com>
Date: Sat, 10 Aug 2024 13:56:39 +0200
Subject: [PATCH 3/3] feat(ui): improve layout (small screens)

---
 .../channel-main/channel-operation.component.css  |  4 ++++
 .../components/new/schema/schema.component.css    |  2 +-
 .../components/new/schemas/schemas.component.css  |  7 +++++++
 .../schemas/schema/schema.component.css           |  2 ++
 .../schemas/schema/schema.component.html          | 15 +++++++--------
 springwolf-ui/src/main.css                        |  1 +
 6 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.css b/springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.css
index 0ba2b09a3..7da3e7086 100644
--- a/springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.css
+++ b/springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.css
@@ -1,4 +1,8 @@
 /* SPDX-License-Identifier: Apache-2.0 */
+.table-row > *:first-child {
+  vertical-align: middle;
+}
+
 :host ::ng-deep .mdc-evolution-chip-set__chips {
   max-width: 100%;
 }
diff --git a/springwolf-ui/src/app/components/new/schema/schema.component.css b/springwolf-ui/src/app/components/new/schema/schema.component.css
index 964ca0132..e5ef76bbb 100644
--- a/springwolf-ui/src/app/components/new/schema/schema.component.css
+++ b/springwolf-ui/src/app/components/new/schema/schema.component.css
@@ -12,7 +12,7 @@
 }
 
 .example {
-  word-break: break-all;
+  word-break: break-word;
 }
 
 .attribute {
diff --git a/springwolf-ui/src/app/components/new/schemas/schemas.component.css b/springwolf-ui/src/app/components/new/schemas/schemas.component.css
index 7f18f9d3b..d2fb69cf3 100644
--- a/springwolf-ui/src/app/components/new/schemas/schemas.component.css
+++ b/springwolf-ui/src/app/components/new/schemas/schemas.component.css
@@ -1,4 +1,11 @@
 /* SPDX-License-Identifier: Apache-2.0 */
+.table-row > *:first-child {
+  vertical-align: middle;
+}
+.table-row > *:last-child {
+  word-break: break-word;
+}
+
 .type-badge {
   display: inline;
   background-color: #e0e0e0;
diff --git a/springwolf-ui/src/app/components/schemas/schema/schema.component.css b/springwolf-ui/src/app/components/schemas/schema/schema.component.css
index 575274410..bb3dc33e0 100644
--- a/springwolf-ui/src/app/components/schemas/schema/schema.component.css
+++ b/springwolf-ui/src/app/components/schemas/schema/schema.component.css
@@ -1,6 +1,7 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 .schema {
   font-weight: 500;
+  width: 100%;
 }
 
 .key {
@@ -23,6 +24,7 @@
 .example {
   color: #6b6b6b;
   font-style: italic;
+  word-break: break-word;
 }
 
 .description {
diff --git a/springwolf-ui/src/app/components/schemas/schema/schema.component.html b/springwolf-ui/src/app/components/schemas/schema/schema.component.html
index 7a0a7cb7d..bcada1d38 100644
--- a/springwolf-ui/src/app/components/schemas/schema/schema.component.html
+++ b/springwolf-ui/src/app/components/schemas/schema/schema.component.html
@@ -3,16 +3,15 @@
   <app-json [data]="schema().example?.rawValue"></app-json>
 </div>
 <p>Properties</p>
+<!--  Primitive types  -->
+<ng-container
+  *ngIf="schema().type !== 'object'"
+  [ngTemplateOutlet]="valueContent"
+  [ngTemplateOutletContext]="{ value: schema() }"
+>
+</ng-container>
 <table class="schema">
   <tbody>
-    <!--  Primitive types  -->
-    <tr *ngIf="schema().type !== 'object'">
-      <ng-container
-        [ngTemplateOutlet]="valueContent"
-        [ngTemplateOutletContext]="{ value: schema() }"
-      >
-      </ng-container>
-    </tr>
     <!--  Objects  -->
     <tr *ngFor="let property of schema().properties || {} | keyvalue">
       <td class="key">
diff --git a/springwolf-ui/src/main.css b/springwolf-ui/src/main.css
index 2dc041944..5a06be81b 100644
--- a/springwolf-ui/src/main.css
+++ b/springwolf-ui/src/main.css
@@ -9,6 +9,7 @@ body {
 
 a {
   overflow-wrap: break-word;
+  word-break: break-word;
   max-width: 100%;
 }