Improve instance rendering (#10165)

- Fix visual glitches on narrow viewports

Author: SchrodingersGat

src/frontend/src/components/render/Instance.tsx

@@ -214,7 +214,7 @@ export function RenderInlineModel({
   }
 
   return (
-    <Group gap='xs' justify='space-between' wrap='nowrap' title={tooltip}>
+    <Group gap='xs' justify='space-between' title={tooltip}>
       <Group gap='xs' justify='left' wrap='nowrap'>
         {prefix}
         {image && <Thumbnail src={image} size={18} />}
@@ -260,7 +260,7 @@ export function InlineSecondaryBadge({
 }): ReactNode {
   return (
     <Paper p={2} withBorder style={{ backgroundColor: 'transparent' }}>
-      <Group gap='xs'>
+      <Group gap='xs' wrap='nowrap'>
         {title && (
           <Text size={size} title={title}>
             {title}:

src/frontend/src/components/render/Stock.tsx

@@ -111,7 +111,7 @@ export function RenderStockItem(
 
   // Form the "suffix" text to display
   const suffix: ReactNode = (
-    <Group gap='xs'>
+    <Group gap='xs' wrap='nowrap'>
       <Text size='xs'>{quantity_string}</Text>
       {location && (
         <TableHoverCard