fix deps rows version align, README rendering tweaks (#2174)

Author: Simek

bun.lock

@@ -15,7 +15,7 @@ type Props = {
 export default function DependencyRow({ name, version, packageExists }: Props) {
   const { isSmallScreen } = useLayout();
   const versionLabel = getVersionLabel(version);
-  const hasLongVersion = typeof versionLabel === 'string' && versionLabel.length > 26;
+  const hasLongVersion = typeof versionLabel === 'string' && versionLabel.length > 18;
 
   return (
     <View
@@ -60,8 +60,8 @@ export default function DependencyRow({ name, version, packageExists }: Props) {
       </span>
       <Label
         style={[
-          tw`font-mono text-xs leading-[14px] text-secondary`,
-          hasLongVersion && tw`ml-auto`,
+          tw`font-mono flex-shrink-0 text-right text-xs leading-[14px] text-secondary`,
+          hasLongVersion && tw`ml-auto flex-shrink`,
         ]}>
         {getVersionLabel(version)}
       </Label>

components/Package/DependencyRow.tsx

@@ -51,7 +51,7 @@
     "rehype-sanitize": "^6.0.0",
     "remark-emoji": "^5.0.2",
     "remark-gfm": "^4.0.1",
-    "swr": "^2.3.8",
+    "swr": "^2.4.0",
     "tailwindcss": "^3.4.19",
     "twrnc": "^4.16.0",
     "use-debounce": "^10.1.0"

package.json

@@ -561,6 +561,10 @@ select {
       padding-block: 4px;
       margin-inline-start: 0;
     }
+
+    + div[data-table-wrapper] {
+      margin-top: 12px;
+    }
   }
 
   li {
@@ -589,6 +593,10 @@ select {
     overflow-x: auto;
     border-radius: 9px;
     border: 1px solid var(--table-border);
+
+    + div[data-table-wrapper] {
+      margin-top: 12px;
+    }
   }
 
   table {
@@ -651,6 +659,10 @@ select {
     border: 1px solid var(--table-border);
     padding: 5px 8px;
 
+    &:empty {
+      display: none;
+    }
+
     &:first-child {
       border-left: 0;
     }