Update commit message instructions

web/features/deployments/detail/settings-tab/access/channels-section.tsx

@@ -107,9 +107,31 @@ function ChannelEmptyState({ children }: {
   children: ReactNode
 }) {
   return (
-    <div className="flex min-h-8 items-center rounded-lg bg-background-default-subtle px-3 system-xs-regular text-text-tertiary">
-      <span className="mr-1.5 i-ri-information-line size-3.5 shrink-0 text-text-quaternary" aria-hidden="true" />
-      <span className="min-w-0 truncate">{children}</span>
+    <div className="flex min-h-9 items-start gap-1.5 rounded-lg border border-divider-subtle bg-background-default-subtle px-3 py-2 system-xs-regular text-text-tertiary">
+      <span className="i-ri-information-line mt-0.5 size-3.5 shrink-0 text-text-quaternary" aria-hidden="true" />
+      <span className="min-w-0">{children}</span>
+    </div>
+  )
+}
+
+function AccessChannelsDisabledState({ children }: {
+  children: ReactNode
+}) {
+  const { t } = useTranslation('deployments')
+
+  return (
+    <div className="flex min-h-16 items-start gap-3 rounded-lg border border-dashed border-components-panel-border bg-components-panel-bg-blur px-4 py-3">
+      <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-background-default-subtle text-text-tertiary">
+        <span className="i-ri-toggle-line size-4" aria-hidden="true" />
+      </span>
+      <div className="flex min-w-0 flex-col gap-0.5">
+        <span className="system-sm-medium text-text-secondary">
+          {children}
+        </span>
+        <span className="system-xs-regular text-text-tertiary">
+          {t('access.channels.disabledHint')}
+        </span>
+      </div>
     </div>
   )
 }
@@ -248,9 +270,9 @@ export function AccessChannelsSection({
                 </div>
               )
             : (
-                <div className="system-xs-regular text-text-tertiary">
+                <AccessChannelsDisabledState>
                   {t('access.channels.disabled')}
-                </div>
+                </AccessChannelsDisabledState>
               )}
     </Section>
   )

web/features/deployments/detail/settings-tab/access/permissions-section.tsx

@@ -29,7 +29,7 @@ function AccessPermissionsSkeleton() {
   const { t } = useTranslation('deployments')
 
   return (
-    <DetailTable>
+    <DetailTable className="block pc:table">
       <DetailTableHeader className="hidden pc:table-header-group">
         <DetailTableRow>
           <DetailTableHead className={ACCESS_PERMISSION_DETAIL_TABLE_COLUMN_CLASS_NAMES.environment}>{t('access.permissions.col.environment')}</DetailTableHead>
@@ -37,16 +37,16 @@ function AccessPermissionsSkeleton() {
           <DetailTableHead className={ACCESS_PERMISSION_DETAIL_TABLE_COLUMN_CLASS_NAMES.subjects}>{t('access.permissions.col.subjects')}</DetailTableHead>
         </DetailTableRow>
       </DetailTableHeader>
-      <DetailTableBody>
+      <DetailTableBody className="block pc:table-row-group">
         {ACCESS_PERMISSIONS_SKELETON_KEYS.map(key => (
-          <DetailTableRow key={key} className="block pc:table-row">
-            <DetailTableCell className="block h-auto px-4 pt-3 pb-1 pc:table-cell pc:px-2.5 pc:py-[5px] pc:pl-3">
+          <DetailTableRow key={key} className="block h-auto pc:table-row pc:h-8">
+            <DetailTableCell className="block h-auto max-w-none px-4 pt-3 pb-1 pc:table-cell pc:max-w-[200px] pc:px-2.5 pc:py-[5px] pc:pl-3">
               <SkeletonRectangle className="h-4 w-32 animate-pulse" />
             </DetailTableCell>
-            <DetailTableCell className="block h-auto px-4 py-1 pc:table-cell pc:px-2.5 pc:py-[5px] pc:pl-3">
+            <DetailTableCell className="block h-auto max-w-none px-4 py-1 pc:table-cell pc:max-w-[200px] pc:px-2.5 pc:py-[5px] pc:pl-3">
               <SkeletonRectangle className="my-0 h-8 w-full animate-pulse rounded-lg" />
             </DetailTableCell>
-            <DetailTableCell className="block h-auto px-4 pt-1 pb-3 pc:table-cell pc:px-2.5 pc:py-[5px] pc:pl-3">
+            <DetailTableCell className="block h-auto max-w-none px-4 pt-1 pb-3 pc:table-cell pc:max-w-[200px] pc:px-2.5 pc:py-[5px] pc:pl-3">
               <SkeletonRectangle className="my-0 h-8 w-full animate-pulse rounded-lg" />
             </DetailTableCell>
           </DetailTableRow>
@@ -88,7 +88,7 @@ export function AccessPermissionsSection({
                 </SectionState>
               )
             : (
-                <DetailTable>
+                <DetailTable className="block pc:table">
                   <DetailTableHeader className="hidden pc:table-header-group">
                     <DetailTableRow>
                       <DetailTableHead className={ACCESS_PERMISSION_DETAIL_TABLE_COLUMN_CLASS_NAMES.environment}>{t('access.permissions.col.environment')}</DetailTableHead>
@@ -96,7 +96,7 @@ export function AccessPermissionsSection({
                       <DetailTableHead className={ACCESS_PERMISSION_DETAIL_TABLE_COLUMN_CLASS_NAMES.subjects}>{t('access.permissions.col.subjects')}</DetailTableHead>
                     </DetailTableRow>
                   </DetailTableHeader>
-                  <DetailTableBody>
+                  <DetailTableBody className="block pc:table-row-group">
                     {environments.map(environment => (
                       <EnvironmentPermissionRow
                         key={environment.id}

web/features/deployments/detail/settings-tab/access/permissions.tsx

@@ -515,8 +515,8 @@ export function EnvironmentPermissionRow({
   }
 
   return (
-    <DetailTableRow className="block pc:table-row">
-      <DetailTableCell className="block h-auto px-4 pt-3 pb-1 align-top pc:table-cell pc:px-2.5 pc:py-[5px] pc:pl-3">
+    <DetailTableRow className="block h-auto pc:table-row pc:h-8">
+      <DetailTableCell className="block h-auto max-w-none px-4 pt-3 pb-1 align-top pc:table-cell pc:max-w-[200px] pc:px-2.5 pc:py-[5px] pc:pl-3">
         <div className="system-2xs-medium-uppercase text-text-tertiary pc:hidden">
           {t('access.permissions.col.environment')}
         </div>
@@ -526,7 +526,7 @@ export function EnvironmentPermissionRow({
           </span>
         </div>
       </DetailTableCell>
-      <DetailTableCell className="block h-auto px-4 py-1 align-top pc:table-cell pc:px-2.5 pc:py-[5px] pc:pl-3">
+      <DetailTableCell className="block h-auto max-w-none px-4 py-1 align-top pc:table-cell pc:max-w-[200px] pc:px-2.5 pc:py-[5px] pc:pl-3">
         <div className="mb-1 system-2xs-medium-uppercase text-text-tertiary pc:hidden">
           {t('access.permissions.col.permission')}
         </div>
@@ -537,7 +537,7 @@ export function EnvironmentPermissionRow({
           onChange={handlePermissionChange}
         />
       </DetailTableCell>
-      <DetailTableCell className="block h-auto px-4 pt-1 pb-3 align-top pc:table-cell pc:px-2.5 pc:py-[5px] pc:pl-3">
+      <DetailTableCell className="block h-auto max-w-none px-4 pt-1 pb-3 align-top pc:table-cell pc:max-w-[200px] pc:px-2.5 pc:py-[5px] pc:pl-3">
         <div className="mb-1 system-2xs-medium-uppercase text-text-tertiary pc:hidden">
           {t('access.permissions.col.subjects')}
         </div>
@@ -551,15 +551,20 @@ export function EnvironmentPermissionRow({
                   onChange={handleSubjectsChange}
                 />
                 {!accessSubjectsQuery.isLoading && subjects.length === 0 && (
-                  <span className="mt-1.5 block system-xs-regular text-text-tertiary">
-                    {t('access.members.emptySelection')}
+                  <span className="mt-1.5 flex min-h-7 items-start gap-1.5 rounded-lg border border-util-colors-warning-warning-200 bg-util-colors-warning-warning-50 px-2 py-1.5 system-xs-regular text-util-colors-warning-warning-700">
+                    <span className="i-ri-error-warning-line mt-0.5 size-3.5 shrink-0" aria-hidden="true" />
+                    <span className="min-w-0">
+                      {t('access.members.emptySelection')}
+                    </span>
                   </span>
                 )}
               </>
             )
           : (
               <div className="flex min-h-8 items-center system-xs-regular text-text-tertiary">
-                {t(`access.permission.${permissionKind}Desc`)}
+                <span className="min-w-0">
+                  {t(`access.permission.${permissionKind}Desc`)}
+                </span>
               </div>
             )}
       </DetailTableCell>

web/features/deployments/detail/table-styles.ts

@@ -17,9 +17,9 @@ export const RELEASE_DETAIL_TABLE_COLUMN_CLASS_NAMES = {
 }
 
 export const ACCESS_PERMISSION_DETAIL_TABLE_COLUMN_CLASS_NAMES = {
-  environment: 'w-[22%]',
-  permission: 'w-[28%]',
-  subjects: 'w-[50%]',
+  environment: 'w-[20%]',
+  permission: 'w-[36%]',
+  subjects: 'w-[44%]',
 }
 
 export const API_KEY_DETAIL_TABLE_COLUMN_CLASS_NAMES = {

web/i18n/en-US/deployments.json

@@ -34,6 +34,7 @@
   "access.channels.col.status": "Status",
   "access.channels.description": "WebApp and CLI entry points use the access permissions above.",
   "access.channels.disabled": "Access channels are turned off for this project.",
+  "access.channels.disabledHint": "Enable access channels to expose WebApp and CLI entry points again.",
   "access.channels.followPermission": "Follows permissions",
   "access.channels.title": "Access channels",
   "access.cli.description": "Use the unified domain when accessing this project from the CLI.",