feat: improve slug input UX and fix label layout (#6)

Add sample app buttons and fallback hint to AppSearch.
Fix wrapping/overflow issues in LabelView and refine tooltip/layout spacing.

Author: diptodeepb

frontend/src/components/AppSearch.jsx

@@ -3,29 +3,53 @@ import { useState } from "react";
 function AppSearch({ onSubmit, loading }) {
   const [value, setValue] = useState("");
 
+  const sampleApps = ["gitguardian", "octobox"];
+
   return (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault();
-        onSubmit(value);
-      }}
-      className="mt-6 flex flex-col gap-2 sm:flex-row"
-    >
-      <input
-        type="text"
-        placeholder="GitHub App slug (e.g. gitguardian)"
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        className="w-full flex-1 rounded bg-white/10 px-3 py-2 text-sm text-white placeholder:text-gray-400 focus:outline-none focus:ring"
-      />
-      <button
-        type="submit"
-        disabled={loading}
-        className="w-full rounded bg-indigo-600 px-4 py-2 text-sm font-medium hover:bg-indigo-500 disabled:opacity-50 sm:w-auto"
+    <div className="mt-6">
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          onSubmit(value);
+        }}
+        className="flex flex-col gap-2 sm:flex-row"
       >
-        {loading ? "Inspecting…" : "Inspect"}
-      </button>
-    </form>
+        <input
+          type="text"
+          placeholder="Enter a GitHub App slug"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          className="w-full flex-1 rounded bg-white/10 px-3 py-2 text-sm text-white placeholder:text-gray-400 focus:outline-none focus:ring"
+        />
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full rounded bg-indigo-600 px-4 py-2 text-sm font-medium hover:bg-indigo-500 disabled:opacity-50 sm:w-auto"
+        >
+          {loading ? "Inspecting…" : "Inspect"}
+        </button>
+      </form>
+
+      <div className="mt-3 flex flex-wrap items-center gap-2 text-xs text-gray-400">
+        <span>Try:</span>
+
+        {sampleApps.map((app) => (
+          <button
+            key={app}
+            type="button"
+            onClick={() => setValue(app)}
+            className="rounded bg-white/10 px-2 py-1 hover:bg-white/20 transition"
+          >
+            {app}
+          </button>
+        ))}
+      </div>
+
+      <p className="mt-2 text-xs text-gray-500">
+        Unresolved slugs automatically fall back to the PermLens GitHub App.
+      </p>
+    </div>
   );
 }
 

frontend/src/components/LabelView.jsx

@@ -28,8 +28,9 @@ function LabelView({ label, meta, slug }) {
                 </div>
 
                 <div className="pointer-events-none absolute right-0 top-8 w-56 rounded bg-black/90 px-3 py-2 text-xs text-gray-200 opacity-0 shadow-lg transition-opacity group-hover:opacity-100">
-                  Showing a cached privacy label.<br />
-                  Cached {cacheMinutesAgo} minute{cacheMinutesAgo !== 1 && "s"} ago.
+                  Showing a cached privacy label.
+                  <br />
+                  Cached {cacheMinutesAgo} minute{cacheMinutesAgo !== 1 && "s"}{" "} ago.
                 </div>
               </div>
             )}
@@ -56,7 +57,7 @@ function LabelView({ label, meta, slug }) {
       <header className="mb-6">
         <h2 className="text-lg font-semibold sm:text-xl">Privacy Label</h2>
         <div
-          className={`mt-2 inline-flex items-center rounded px-3 py-1 text-sm font-medium ${styles}`}
+          className={`mt-2 inline-flex max-w-full flex-wrap items-center rounded px-3 py-1 text-sm font-medium break-words ${styles}`}
         >
           Overall sensitivity: {label.overall_sensitivity}
         </div>
@@ -69,9 +70,9 @@ function LabelView({ label, meta, slug }) {
         <ul className="grid grid-cols-1 gap-3 sm:grid-cols-2 [@media(max-height:700px)]:grid-cols-2">
           {label.data_categories.map((cat) => (
             <li key={cat.key} className="rounded bg-black/30 p-3">
-              <div className="flex items-center justify-between">
-                <span className="font-medium">{cat.label}</span>
-                <span className="text-xs text-gray-400">
+              <div className="flex items-center justify-between gap-2">
+                <span className="font-medium min-w-0">{cat.label}</span>
+                <span className="text-xs text-gray-400 shrink-0">
                   {cat.sensitivity}
                 </span>
               </div>
@@ -102,4 +103,4 @@ function LabelView({ label, meta, slug }) {
   );
 }
 
-export default LabelView;
+export default LabelView;