@autobusal/common 1.9.0 → 1.10.0

package/Avatar.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { OperatorData } from '@autobusal/providers/types/operators';
 import { AgentData } from '@autobusal/providers/types/agents';
+import { logoBox } from './styles';
 
 interface Props {
   display?: OperatorData | AgentData
@@ -19,8 +20,8 @@ const Container = styled.div`
   gap: 10px;
 
   & > img {
-    display: block;
-    width: 80px;
+    ${ logoBox('80px', '48px') }
+
     border-radius: ${ props => props.theme.borderRadius };
   }
 `;

package/CompanyItem/styles.ts

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { Link } from 'react-router-dom';
+import { logoBox } from '../styles';
 
 export const Item = styled.div<{
   $column: boolean
@@ -41,8 +42,8 @@ const LogoCss = css`
   justify-content: center;
 
   & > img {
-    display: block;
-    width: 120px;
+    ${ logoBox('120px', '72px') }
+
     border-radius: ${ props => props.theme.borderRadius };
   }
 `;

package/RouteItem/styles.ts

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { Link } from 'react-router-dom';
+import { logoFit } from '../styles';
 
 export const Container = styled.div`
   padding: 10px;
@@ -29,8 +30,13 @@ export const Logo = styled(Link)`
   border-radius: ${ props => props.theme.borderRadius };
 
   & > img {
-    display: block;
+    ${ logoFit }
+
+    /* the container carries aspect-ratio: 1.35 - filling it completely is
+       what lets object-fit letterbox inside that shape, instead of the
+       image dictating its own height and spilling out of it */
     width: 100%;
+    height: 100%;
   }
 `;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"

package/styles.ts

@@ -0,0 +1,51 @@
+import { css } from 'styled-components';
+
+/**
+ * How an operator/agent logo is displayed, everywhere.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-07-31
+ *
+ * Logos are uploaded by operators at whatever size and shape they happen to
+ * have - tall badges, wide wordmarks, squares. Every place that rendered
+ * one set a width (or `width: 100%`) and no height and no `object-fit`, so
+ * the image was left to take whatever height its own ratio implied: inside
+ * a fixed or aspect-ratio'd box that meant it overflowed and was visibly
+ * cropped, and in a flex row it stretched its neighbours around.
+ *
+ * `object-fit: contain` is the whole fix. It scales the image down until it
+ * fits INSIDE the box in its own aspect ratio, never cropping and never
+ * distorting. Whatever room is left over stays empty - deliberately
+ * transparent rather than a colour, so the logo sits on whatever the
+ * surrounding card already uses and dark and light themes both work without
+ * a second rule.
+ *
+ * The box needs BOTH dimensions for this to mean anything: with only a
+ * width there is no leftover space for `contain` to preserve, and the
+ * behaviour collapses back to the original bug. Callers pass the size.
+ *
+ * `object-position: center` is explicit rather than relied upon - it is the
+ * default, but the whole point here is that nothing about the framing is
+ * left to chance.
+ */
+export const logoFit = css`
+  display: block;
+  object-fit: contain;
+  object-position: center;
+
+  /* no fill, so the logo adopts whatever surface it is placed on */
+  background: transparent;
+`;
+
+/**
+ * A complete logo box: fits the image inside the given dimensions without
+ * cropping or stretching it.
+ *
+ * Pass the size the layout wants; the image keeps its own proportions
+ * within it.
+ */
+export const logoBox = (width: string, height: string) => css`
+  ${ logoFit }
+
+  width: ${ width };
+  height: ${ height };
+`;