From 525999440ad2f61ce2e3b06063f9fa7ebf892c3d Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Tue, 13 Jan 2026 21:48:35 +0100
Subject: [PATCH] fix: inline elements should not wrap by default

---
 .../panel-utils/PanelUtils.module.scss          |  6 +++++-
 .../app-settings/panel-utils/PanelUtils.tsx     | 17 +++++++++++++----
 .../panel/network-panel/NetworkInterfaces.tsx   |  2 +-
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss b/apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss
index 60f34d179..0db42c1f0 100644
--- a/apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss
+++ b/apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss
@@ -196,7 +196,6 @@ $inner-padding: 1rem;
 .inlineElements {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
 
   &.inner {
     gap: 0.5rem;
@@ -213,6 +212,11 @@ $inner-padding: 1rem;
   &.apart {
     justify-content: space-between;
   }
+
+  &.wrap {
+    flex-wrap: wrap;
+    row-gap: 0.5rem;
+  }
 }
 
 @keyframes animloader {
diff --git a/apps/client/src/features/app-settings/panel-utils/PanelUtils.tsx b/apps/client/src/features/app-settings/panel-utils/PanelUtils.tsx
index 98fbc4d74..1a8bdd574 100644
--- a/apps/client/src/features/app-settings/panel-utils/PanelUtils.tsx
+++ b/apps/client/src/features/app-settings/panel-utils/PanelUtils.tsx
@@ -107,7 +107,7 @@ export function BlockQuote({ children }: { children: ReactNode }) {
   return <blockquote className={style.blockquote}>{children}</blockquote>;
 }
 
-export function Error({ children, className }: { children: ReactNode } & React.JSX.IntrinsicElements['div']) {
+export function Error({ children, className }: PropsWithChildren & React.JSX.IntrinsicElements['div']) {
   return <div className={cx([style.fieldError, className])}>{children}</div>;
 }
 
@@ -131,16 +131,25 @@ type InlineProps<C extends AllowedInlineTags> = {
   as?: C;
   relation?: 'inner' | 'component' | 'section';
   align?: 'start' | 'end' | 'apart';
-  className?: string;
-};
+  wrap?: 'wrap' | 'nowrap';
+} & Omit<React.JSX.IntrinsicElements[C], 'align'>;
 
 export function InlineElements<C extends AllowedInlineTags = 'div'>({
   children,
   as,
   relation = 'component',
   align = 'start',
+  wrap = 'nowrap',
   className,
+  ...elementProps
 }: PropsWithChildren<InlineProps<C>>) {
   const Element = as ?? 'div';
-  return <Element className={cx([style.inlineElements, style[relation], style[align], className])}>{children}</Element>;
+  return (
+    <Element
+      {...(elementProps as HTMLAttributes<HTMLElement>)}
+      className={cx([style.inlineElements, style[relation], style[align], style[wrap], className])}
+    >
+      {children}
+    </Element>
+  );
 }
diff --git a/apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx b/apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx
index 0b6ea6354..e8df91f07 100644
--- a/apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx
+++ b/apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx
@@ -14,7 +14,7 @@ export default function InfoNif() {
   const handleClick = (address: string) => openLink(address);
 
   return (
-    <Panel.InlineElements>
+    <Panel.InlineElements wrap='wrap'>
       {data.networkInterfaces.map((nif) => {
         // interfaces outside localhost wont have access
         if (nif.name === 'localhost' && !isLocalhost) return null;