diff --git a/apps/app/src/react-app/design-system/button.tsx b/apps/app/src/react-app/design-system/button.tsx
index 53db2777c..b42500beb 100644
--- a/apps/app/src/react-app/design-system/button.tsx
+++ b/apps/app/src/react-app/design-system/button.tsx
@@ -6,7 +6,7 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
 };
 
 const base =
-  "inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors duration-150 active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-[rgba(var(--dls-accent-rgb),0.2)] disabled:opacity-50 disabled:cursor-not-allowed";
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg px-4 py-2 text-sm font-medium transition-colors duration-150 active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-[rgba(var(--dls-accent-rgb),0.2)] disabled:opacity-50 disabled:cursor-not-allowed";
 
 const variants: Record<NonNullable<ButtonProps["variant"]>, string> = {
   primary:
diff --git a/apps/app/src/react-app/domains/settings/pages/skills-view.tsx b/apps/app/src/react-app/domains/settings/pages/skills-view.tsx
index 830cf4bc6..66238c8f5 100644
--- a/apps/app/src/react-app/domains/settings/pages/skills-view.tsx
+++ b/apps/app/src/react-app/domains/settings/pages/skills-view.tsx
@@ -79,7 +79,7 @@ type ToastTone = "info" | "success" | "warning" | "error";
 const pageTitleClass = "text-[28px] font-semibold tracking-[-0.5px] text-dls-text";
 const sectionTitleClass = "text-[15px] font-medium tracking-[-0.2px] text-dls-text";
 const panelCardClass =
-  "rounded-[20px] border border-dls-border bg-dls-surface p-5 transition-all hover:border-dls-border hover:shadow-[0_2px_12px_-4px_rgba(0,0,0,0.06)]";
+  "rounded-[20px] border border-dls-border bg-dls-surface p-3 transition-all hover:border-dls-border hover:shadow-[0_2px_12px_-4px_rgba(0,0,0,0.06)] sm:p-5";
 
 const OPENWORK_DEFAULT_SKILL_NAMES = new Set([
   "workspace-guide",
@@ -718,7 +718,7 @@ export function SkillsView(props: SkillsViewProps) {
   return (
     <section className="space-y-8">
       <div className="space-y-6">
-        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <div className="flex flex-wrap flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
           <div className="min-w-0">
             {props.showHeader !== false ? <h2 className={pageTitleClass}>{t("skills.title")}</h2> : null}
             <p className="mt-2 max-w-2xl text-[14px] leading-relaxed text-dls-secondary">
@@ -726,7 +726,7 @@ export function SkillsView(props: SkillsViewProps) {
             </p>
           </div>
 
-          <div className="flex flex-wrap gap-3 lg:justify-end">
+          <div className="flex flex-wrap gap-3 justify-start xl:justify-end">
             <button
               type="button"
               onClick={() => runDesktopAction(extensions.importLocalSkill)}
@@ -752,7 +752,7 @@ export function SkillsView(props: SkillsViewProps) {
           </div>
         </div>
 
-        <div className="flex flex-col gap-3 rounded-[20px] border border-dls-border bg-dls-surface p-4 md:flex-row md:items-center md:justify-between">
+        <div className="flex flex-col gap-3 rounded-[20px] border border-dls-border bg-dls-surface p-4 2xl:flex-row 2xl:items-center 2xl:justify-between">
           <div className="relative min-w-0 flex-1">
             <Search size={16} className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-dls-secondary" />
             <input
@@ -822,7 +822,7 @@ export function SkillsView(props: SkillsViewProps) {
             </div>
           ) : (
             <div className="rounded-[24px] bg-dls-hover p-4">
-              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
                 {filteredSkills.map((skill) => (
                   <div
                     key={skill.path}
@@ -832,9 +832,9 @@ export function SkillsView(props: SkillsViewProps) {
                     onClick={() => void openSkill(skill)}
                     onKeyDown={(event) => handleSkillCardKeyDown(event, skill)}
                   >
-                    <div className="flex min-w-0 gap-4">
-                      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-dls-border bg-dls-hover">
-                        <Package size={20} className="text-dls-secondary" />
+                    <div className="flex min-w-0 gap-3 sm:gap-4">
+                      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-dls-border bg-dls-hover sm:h-10 sm:w-10">
+                        <Package className="h-4 w-4 text-dls-secondary sm:h-5 sm:w-5" />
                       </div>
                       <div className="min-w-0 flex-1">
                         <div className="flex flex-wrap items-center gap-2">
@@ -959,27 +959,27 @@ export function SkillsView(props: SkillsViewProps) {
                 </div>
               ) : (
                 <div className="rounded-[24px] bg-dls-hover p-4">
-                  <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                  <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
                     {filteredCloudOrgSkills.map((skill) => {
                       const state = cloudSkillInstallState(skill);
                       const installedName = importedCloudSkills[skill.id]?.installedName ?? null;
                       return (
                         <div key={skill.id} className={`${panelCardClass} flex flex-col gap-4 text-left`}>
-                          <div className="flex min-w-0 gap-4">
-                            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-dls-border bg-dls-hover">
-                              <Cloud size={20} className="text-dls-secondary" />
+                          <div className="flex min-w-0 gap-3 sm:gap-4">
+                            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-dls-border bg-dls-hover sm:h-10 sm:w-10">
+                              <Cloud className="h-4 w-4 text-dls-secondary sm:h-5 sm:w-5" />
                             </div>
                             <div className="min-w-0 flex-1">
                               <h4 className="truncate text-[14px] font-semibold text-dls-text">{skill.title}</h4>
                               {skill.description ? (
                                 <p className="mt-2 line-clamp-2 text-[13px] leading-relaxed text-dls-secondary">{skill.description}</p>
                               ) : null}
-                              <div className="mt-3 flex flex-wrap items-center gap-2 text-[11px] text-dls-secondary">
-                                {skill.hubName ? <span className={tagClass}>{t("skills.cloud_hub_label", undefined, { name: skill.hubName })}</span> : null}
+                              <div className="mt-3 flex items-center gap-2 overflow-x-auto whitespace-nowrap text-[11px] text-dls-secondary">
+                                {skill.hubName ? <span className={tagClass} title={skill.hubName}>{t("skills.cloud_hub_label", undefined, { name: skill.hubName })}</span> : null}
                                 {skill.shared === "org" ? <span className={tagClass}>{t("skills.cloud_shared_org")}</span> : null}
                                 {skill.shared === "public" ? <span className={tagClass}>{t("skills.cloud_shared_public")}</span> : null}
                                 {skill.shared === null && !skill.hubName ? <span className={tagClass}>{t("skills.cloud_shared_private")}</span> : null}
-                                {installedName ? <span className={tagClass}>{t("skills.cloud_installed_as", undefined, { name: installedName })}</span> : null}
+                                {installedName ? <span className={tagClass} title={installedName}>{t("skills.cloud_installed_as", undefined, { name: installedName })}</span> : null}
                                 {state === "installed" ? <span className={tagClass}>{t("skills.cloud_status_installed")}</span> : null}
                                 {state === "update" ? <span className={tagClass}>{t("skills.cloud_status_update")}</span> : null}
                               </div>
@@ -1107,19 +1107,19 @@ export function SkillsView(props: SkillsViewProps) {
             </div>
           ) : (
             <div className="rounded-[24px] bg-dls-hover p-4">
-              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
                 {filteredHubSkills.map((skill) => (
                   <div key={`${skill.source.owner}/${skill.source.repo}/${skill.name}`} className={`${panelCardClass} flex flex-col gap-4 text-left`}>
-                    <div className="flex min-w-0 gap-4">
-                      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-dls-border bg-dls-hover">
-                        <Package size={20} className="text-dls-secondary" />
+                    <div className="flex min-w-0 gap-3 sm:gap-4">
+                      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-dls-border bg-dls-hover sm:h-10 sm:w-10">
+                        <Package className="h-4 w-4 text-dls-secondary sm:h-5 sm:w-5" />
                       </div>
                       <div className="min-w-0 flex-1">
                         <h4 className="truncate text-[14px] font-semibold text-dls-text">{skill.name}</h4>
                         <p className="mt-2 line-clamp-2 text-[13px] leading-relaxed text-dls-secondary">
                           {skill.description || t("skills.from_repo", undefined, { owner: skill.source.owner, repo: skill.source.repo })}
                         </p>
-                        <div className="mt-3 flex flex-wrap items-center gap-2 text-[11px] text-dls-secondary">
+                        <div className="mt-3 flex items-center gap-2 overflow-x-auto whitespace-nowrap text-[11px] text-dls-secondary">
                           <span className={`${tagClass} font-mono`}>{skill.source.owner}/{skill.source.repo}</span>
                           {skill.trigger ? (
                             <span className={tagClass} title={t("skills.trigger_label", undefined, { trigger: skill.trigger })}>
diff --git a/apps/app/src/react-app/domains/workspace/modal-styles.ts b/apps/app/src/react-app/domains/workspace/modal-styles.ts
index c7cdb915e..5a4799688 100644
--- a/apps/app/src/react-app/domains/workspace/modal-styles.ts
+++ b/apps/app/src/react-app/domains/workspace/modal-styles.ts
@@ -47,7 +47,7 @@ export const subtleInputClass =
   "w-full rounded-xl border border-dls-border bg-dls-hover px-4 py-3 text-[14px] text-dls-text placeholder:text-dls-secondary focus:outline-none focus:ring-2 focus:ring-[rgba(var(--dls-accent-rgb),0.12)] disabled:cursor-not-allowed disabled:opacity-60";
 
 const pillButtonBaseClass =
-  "inline-flex items-center justify-center gap-1.5 rounded-full px-4 py-2 text-[13px] font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[rgba(var(--dls-accent-rgb),0.18)] disabled:cursor-not-allowed disabled:opacity-60";
+  "inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-full px-4 py-2 text-[13px] font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[rgba(var(--dls-accent-rgb),0.18)] disabled:cursor-not-allowed disabled:opacity-60";
 
 export const pillPrimaryClass = `${pillButtonBaseClass} bg-dls-accent text-white hover:bg-[var(--dls-accent-hover)]`;