fix: revert remaining shorthand CSS properties for browser compatibility

- Revert all remaining `inset:` shorthands to longhand in design-system,
  SidebarHelpCenterIcon, menu.css, and PackCard
- Revert `flex-flow` and `place-content` to longhand in design-system

Author: christian-byrne

packages/design-system/src/css/style.css

@@ -746,7 +746,10 @@ button.comfy-queue-btn {
 
 @media only screen and (max-height: 850px) {
   .comfy-menu {
-    inset: 0 0 0 auto !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    left: auto !important;
+    right: 0 !important;
     border-radius: 0;
   }
 
@@ -809,7 +812,10 @@ dialog::backdrop {
 }
 
 .comfy-dialog.comfyui-dialog.comfy-modal {
-  inset: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   transform: none;
 }
 
@@ -821,7 +827,8 @@ dialog::backdrop {
 }
 
 .comfy-dialog .comfy-modal-content {
-  flex-flow: row wrap;
+  flex-direction: row;
+  flex-wrap: wrap;
   gap: 10px;
   color: var(--fg-color);
 }
@@ -893,7 +900,8 @@ dialog::backdrop {
   overflow: hidden;
   display: flex;
   flex-wrap: wrap;
-  place-content: flex-start center;
+  align-content: flex-start;
+  justify-content: center;
 }
 
 .comfy-img-preview img {

src/components/sidebar/SidebarHelpCenterIcon.vue

@@ -147,7 +147,10 @@ onMounted(async () => {
 <style scoped>
 .help-center-backdrop {
   position: absolute;
-  inset: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   z-index: 9999;
   background: transparent;
 }

src/scripts/ui/menu/menu.css

@@ -39,7 +39,10 @@
 /* Popup */
 .comfyui-popup {
   position: absolute;
-  inset: var(--top) var(--right) var(--bottom) var(--left);
+  top: var(--top);
+  right: var(--right);
+  bottom: var(--bottom);
+  left: var(--left);
   z-index: 2000;
   max-height: calc(100vh - var(--limit) - 10px);
   box-shadow: 3px 3px 5px 0 rgb(0 0 0 / 0.3);

src/workbench/extensions/manager/components/manager/packCard/PackCard.vue

@@ -137,7 +137,10 @@ const formattedLatestVersionDate = computed(() => {
 .selected-card::after {
   content: '';
   position: absolute;
-  inset: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   border: 4px solid var(--p-primary-color);
   border-radius: 0.5rem;
   pointer-events: none;