profile-pane 3.1.3 → 3.1.4

package/lib/rdfFormsHelper.d.ts

@@ -4,4 +4,5 @@ formSource: string, // The imported form Turtle source
 formName: string, // The name of the form file (e.g., 'socialMedia.ttl')
 store: Store, dom: Document, editableProfile: NamedNode | null, whichForm?: string): void;
 export declare function loadDocument(store: Store, documentSource: string, documentName: string, documentURI?: string): void;
+export declare function skipLabelsFromTabbing(root: HTMLElement): void;
 //# sourceMappingURL=rdfFormsHelper.d.ts.map

package/lib/rdfFormsHelper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rdfFormsHelper.d.ts","sourceRoot":"","sources":["../src/rdfFormsHelper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAyB,MAAM,QAAQ,CAAA;AAKhE,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,GAAG,EAAE,WAAW,EAChB,OAAO,EAAE,SAAS,EAAE,yCAAyC;AAC7D,UAAU,EAAE,MAAM,EAAE,kCAAkC;AACtD,QAAQ,EAAE,MAAM,EAAI,sDAAsD;AAC1E,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,QAAQ,EACb,eAAe,EAAE,SAAS,GAAG,IAAI,EACjC,SAAS,CAAC,EAAE,MAAM,QAmBjB;AAGH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,MAAM,EACtB,YAAY,EAAE,MAAM,EACpB,WAAW,CAAC,EAAE,MAAM,QAUrB"}
+{"version":3,"file":"rdfFormsHelper.d.ts","sourceRoot":"","sources":["../src/rdfFormsHelper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAyB,MAAM,QAAQ,CAAA;AAKhE,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,GAAG,EAAE,WAAW,EAChB,OAAO,EAAE,SAAS,EAAE,yCAAyC;AAC7D,UAAU,EAAE,MAAM,EAAE,kCAAkC;AACtD,QAAQ,EAAE,MAAM,EAAI,sDAAsD;AAC1E,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,QAAQ,EACb,eAAe,EAAE,SAAS,GAAG,IAAI,EACjC,SAAS,CAAC,EAAE,MAAM,QAqFjB;AA0DH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,MAAM,EACtB,YAAY,EAAE,MAAM,EACpB,WAAW,CAAC,EAAE,MAAM,QAUrB;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CA2B7D"}

package/lib/rdfFormsHelper.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = renderForm;
 exports.loadDocument = loadDocument;
+exports.skipLabelsFromTabbing = skipLabelsFromTabbing;
 var _rdflib = require("rdflib");
 var _solidUi = require("solid-ui");
 const baseUri = 'https://solidos.github.io/profile-pane/src/ontology/';
@@ -25,8 +26,112 @@ store, dom, editableProfile, whichForm) {
   _solidUi.widgets.appendForm(dom, div, {}, subject, formThis, editableProfile, (ok, mes) => {
     if (!ok) _solidUi.widgets.errorMessageBlock(dom, mes);
   });
+
+  // Ensure that when a user clicks “Add skill” or “Add language”, the newly
+  // created input receives focus. Solid-UI provides only a generic "Add" button.
+  // We detect the "add" control by the plus icon it uses and focus the last
+  // text input in the surrounding multiple-field container.
+  enableFocusOnAdd(div);
+
+  // Track the last click/tap position so popups (like solid-ui delete confirmations)
+  // can be positioned closer to where the user clicked.
+  let lastClick = {
+    x: 0,
+    y: 0
+  };
+  div.addEventListener('pointerdown', event => {
+    lastClick = {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }, {
+    capture: true
+  });
+
+  // Solid-UI injects a popup DIV (position:absolute, top:-1em) under a relative container.
+  // Detect it and reposition it using last click coordinates.
+  const repositionPopup = popup => {
+    const win = dom.defaultView || window;
+    const padding = 10;
+    const maxWidth = win.innerWidth - padding;
+    const maxHeight = win.innerHeight - padding;
+
+    // Force fixed positioning, then clamp to viewport so it doesn't get cut off.
+    popup.style.position = 'fixed';
+    popup.style.zIndex = '9999';
+    popup.style.pointerEvents = 'auto';
+    popup.style.opacity = '1';
+    popup.style.visibility = 'visible';
+
+    // Use getBoundingClientRect after it is in DOM; if it is 0x0, fall back to default offset.
+    const rect = popup.getBoundingClientRect();
+    const popupWidth = rect.width || 200;
+    const popupHeight = rect.height || 100;
+    const left = Math.min(Math.max(lastClick.x + padding, padding), maxWidth - popupWidth);
+    const top = Math.min(Math.max(lastClick.y + padding, padding), maxHeight - popupHeight);
+    popup.style.left = `${left}px`;
+    popup.style.top = `${top}px`;
+  };
+  const observer = new MutationObserver(mutations => {
+    for (const mutation of mutations) {
+      for (const node of Array.from(mutation.addedNodes)) {
+        if (!(node instanceof HTMLElement)) continue;
+        // Solid-UI popups are divs with inline position:absolute and grid display
+        if (node.style.position === 'absolute' && node.style.display === 'grid' && node.style.top === '-1em') {
+          repositionPopup(node);
+          continue;
+        }
+        // Also handle nested cases where the popup is not the direct added node
+        const popup = node.querySelector('div[style*="position:absolute"][style*="display:grid"][style*="top:-1em"]');
+        if (popup) repositionPopup(popup);
+      }
+    }
+  });
+  observer.observe(div, {
+    childList: true,
+    subtree: true
+  });
 } // renderForm
 
+function enableFocusOnAdd(root) {
+  const PLUS_ICON = 'noun_19460_green.svg';
+  const isAddButton = el => {
+    const img = el.querySelector('img');
+    const label = el.querySelector('span');
+    return img?.src.includes(PLUS_ICON) && label?.textContent?.trim().toLowerCase().startsWith('add ');
+  };
+  const buttons = Array.from(root.querySelectorAll('div')).filter(isAddButton);
+  buttons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      const scope = function findScope(el) {
+        let cur = el;
+        while (cur && cur !== root) {
+          if (cur.querySelector('input[data-testid="autocomplete-input"]')) return cur;
+          cur = cur.parentElement;
+        }
+        return root;
+      }(btn);
+      const before = new Set(Array.from(scope.querySelectorAll('input[data-testid="autocomplete-input"]')));
+      const start = Date.now();
+      const interval = setInterval(() => {
+        const current = Array.from(scope.querySelectorAll('input[data-testid="autocomplete-input"]'));
+        const newInput = current.find(el => !before.has(el));
+        if (newInput) {
+          // New inputs are usually wrapped in a label/link; make sure focus jumps
+          // straight to the input rather than the label link.
+          skipLabelsFromTabbing(scope);
+          newInput.focus();
+          clearInterval(interval);
+          return;
+        }
+        if (Date.now() - start > 1000) {
+          clearInterval(interval);
+        }
+      }, 50);
+    });
+  });
+}
+
 // we need to load into the store some additional information about Social Media accounts
 function loadDocument(store, documentSource, documentName, documentURI) {
   const finalDocumentUri = documentURI || baseUri + documentName; // Full URI to the file
@@ -37,4 +142,24 @@ function loadDocument(store, documentSource, documentName, documentURI) {
     // the form can be used for both use cases: create UI  for edit and render UI for display
     (0, _rdflib.parse)(documentSource, store, finalDocumentUri, 'text/turtle', () => null); // Load doc directly
   }
+}
+function skipLabelsFromTabbing(root) {
+  // Many Solid-UI forms render field labels as focusable links (hrefs).
+  // Make sure keyboard tabbing skips these label links entirely.
+  const selectors = ['label', '.formFieldName a', '.classifierBox-label a', '.choiceBox-label a', '.label a',
+  // Skip focusable label-like links created by Solid-UI forms, including the vcard note link
+  'a[href="http://www.w3.org/2006/vcard/ns#note"]', 'a[href$="#note"]'].join(', ');
+
+  // querySelectorAll<HTMLElement> ensures the elements are typed correctly so we can access tabIndex.
+  const nodes = root?.querySelectorAll(selectors);
+  if (!nodes) return;
+  Array.from(nodes).forEach(el => {
+    if (typeof el.tabIndex === 'number' && el.tabIndex !== -1) {
+      el.tabIndex = -1;
+    }
+    // Ensure those label links are not announced as focusable elements
+    if (el.getAttribute('aria-hidden') !== 'true') {
+      el.setAttribute('aria-hidden', 'true');
+    }
+  });
 }

package/lib/styles/ProfileCard.css

@@ -69,6 +69,12 @@
   min-width: 0;
 }
 
+/* Ensure prompt inputs stretch to fit their container */
+.add-friend-button-container input[type="text"] {
+  width: 100%;
+  box-sizing: border-box;
+}
+
 .qrCodeSection {
   color: var(--color-text-secondary);
   font-size: 1em;

package/lib/styles/ProfileView.css

@@ -1,22 +1,20 @@
 /* ProfileView.css */
 /* Uses utilities: .section-bg, .text-center */
 
-.profileSection {
-  
-}
-
 /* Horizontal layout for cards */
 .profile-grid .profileSection {
   width: 100%;
   max-width: 100%;
+  min-width: 0;
   box-sizing: border-box;
   margin-bottom: var(--spacing-md);
   box-sizing: border-box;
   margin-bottom: var(--spacing-md);
+  overflow-wrap: anywhere;
 }
 
 @media (min-width: 900px) {
-  .profileSection {
+  .profile-grid .profileSection {
     margin-bottom: 0;
   }
 }

package/lib/styles/editProfile.css

@@ -0,0 +1,62 @@
+.profile-grid .add-friend-button-container,
+.profile-grid .add-community-button-container {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+/* Ensure the button container can shrink properly in narrow layouts */
+.profile-grid .add-community-button-container {
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* Allow any direct children to shrink so no element forces overflow */
+.profile-grid .add-community-button-container > * {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.profile-grid table {
+  margin: 0 !important;
+}
+
+.profile-grid td {
+  padding: 0;
+}
+
+.profile-grid .add-friend-button-container .span,
+.profile-grid .add-community-button-container .span {
+  display: inline-flex;
+  align-items: center;
+}
+
+.profile-grid .add-friend-button-container > div,
+.profile-grid .add-community-button-container > div {
+  flex-basis: 100%;
+}
+
+/* Prevent the add-community input from overflowing its flex container */
+.profile-grid .add-community-button-container input {
+  min-width: 0;
+  max-width: 96%;
+  flex: 1 1 0;
+  word-break: break-word;
+}
+
+.profile-grid .profile-image {
+  width: var( --profile-image-size);
+  height: var( --profile-image-size);
+  margin: var(--spacing-xxxs);
+  border-radius: var(--spacing-lg);
+}
+
+.profile-grid .default-profile-image {
+  width: 140%;
+  height: 140%;
+  object-fit: cover;
+  margin-left: -0.6em;
+  border-radius: var(--spacing-lg);
+}

package/lib/styles/profileRDFFormsEnforced.css

@@ -0,0 +1,427 @@
+/* Delete pop up*/
+/* Make the Solid-UI delete confirmation popup appear near the last click position.
+   Keep the built-in Solid-UI styling (orange border, white background) so it looks like the original.
+*/
+.profile-grid div[style*="position: relative"] > div[style*="display: grid"] {
+/* only override positioning; keep styling (border/background/etc) from solid-ui */
+  position: absolute !important;
+  z-index: 9999 !important;
+  top: 0 !important;
+  right: 0 !important;
+  left: auto !important;
+  display: grid !important;
+  pointer-events: auto !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+  padding: 0.7em !important;
+  min-width: 280px !important;
+  max-width: 90vw !important;
+  background: var(--color-background) !important;
+  border: 0.1em solid var(--color-primary) !important;
+  border-radius: var(--border-radius-base) !important;
+  box-shadow: 0 0.5em 0.9em rgba(0, 0, 0, 0.2) !important;
+  grid-template-columns: auto auto !important;
+  gap: 0.3em !important;
+}
+
+/* Ensure SVG icons and their buttons inside the Solid-UI delete popup have transparent backgrounds */
+.profile-grid div[style*="position: relative"] > div[style*="display: grid"] img[src$=".svg"],
+.profile-grid div[style*="position: relative"] > div[style*="display: grid"] button {
+  background: transparent !important;
+}
+
+.profile-form .individualPane {
+  box-shadow: none !important;
+}
+
+.profile-form p {
+  padding: 0 !important;
+}
+
+.profile-form .mb-md {
+  margin-bottom: 0 !important;
+}
+
+.profile-form h2 {
+  margin-bottom: 1em !important;
+}
+
+.profile-form h3 {
+  color: var(--color-primary) !important;
+  padding: 0 !important;
+  font-size: 1em !important;
+  font-weight: 600 !important;
+}
+
+/* Shared form layout rules are imported from rdfFormsCommon.css */
+/* Solid-UI form sizing fixes scoped to Edit CV section */
+.profile-form .hoverControl:not(:has(> img:first-child)) {
+  border: 0.1em solid rgb(136, 136, 136) !important;
+  flex-direction: column !important;
+}
+
+.profile-form .hoverControl:has(> img:first-child) {
+  background-color: transparent !important;
+  border: none !important;
+  margin: 0 !important;
+  border-radius: 0 !important;
+  padding: 0.7em !important;
+  min-height: var(--min-touch-target);
+  min-width: var(--min-touch-target);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Make sure the delete icon floats in the top-right corner of the full hoverControl wrapper */
+.profile-form .hoverControl,
+.profile-grid .hoverControl {
+  position: relative !important;
+}
+
+.hoverControl > img.hoverControlHide,
+.hoverControl > [data-testid="deleteButtonWithCheck"] {
+  position: absolute !important;
+  top: 0.2em !important;
+  right: 0.2em !important;
+  width: 1.5em !important;
+  height: 1.5em !important;
+  align-items: center;
+  justify-content: center;
+  margin: 0 !important;
+  float: none !important;
+  transform: none !important;
+}
+
+/* When icon is 2nd or 3rd child (i.e. sibling elements exist), align it vertically to the previous item */
+.hoverControl > img.hoverControlHide:nth-child(1),
+.hoverControl > img.hoverControlHide:nth-child(2),
+.hoverControl > [data-testid="deleteButtonWithCheck"]:nth-child(1),
+.hoverControl > [data-testid="deleteButtonWithCheck"]:nth-child(2) {
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  display: inline-flex !important;
+}
+
+/* Show the delete icon only when the container is hovered */
+.profile-grid .hoverControl:hover > img.hoverControlHide,
+.profile-grid .hoverControl:hover > [data-testid="deleteButtonWithCheck"] {
+  display: inline-flex !important;
+}
+
+/* Also show the delete icon when the entire row is hovered */
+.profile-grid .attachmentTable tr:hover .hoverControl > img.hoverControlHide,
+.profile-grid .attachmentTable tr:hover .hoverControl > [data-testid="deleteButtonWithCheck"] {
+  display: inline-flex !important;
+}
+
+/* Make the hover-control cell easier to hit */
+.profile-grid .hoverControl {
+  padding: 0.75em !important;
+  min-width: 2.5em !important;
+  min-height: 2.5em !important;
+}
+
+/* When the hoverControl only contains the hidden delete icon, keep it out of layout so it doesn't create empty space */
+.profile-form .formFieldValue .hoverControl:has(> img.hoverControlHide) {
+  min-width: 0 !important;
+  min-height: 0 !important;
+  width: 0 !important;
+  height: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  overflow: visible !important;
+}
+
+/* Hide delete icon only in autocomplete fields */
+.profile-grid .formFieldValue:has(input[data-testid="autocomplete-input"]) [data-testid="delete-button"] {
+  display: none !important;
+}
+
+/* Keep autocomplete cancel button hidden when the user is not interacting.
+   This avoids the cancel button remaining visible when focus moves away. */
+.profile-grid .formFieldValue:not(:focus-within) [data-testid="cancel-button"] {
+  display: none !important;
+}
+
+.profile-grid .hoverControl:has(> img:first-child) > span {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 0.3em;
+}
+
+.profile-grid div[style*="padding: 0.5em"]:has(> img) > span {
+  margin-left: 0.3em;
+  vertical-align: super !important;
+}
+
+.profile-grid .hoverControl:has(> img:first-child):hover {
+  background-color: transparent !important;
+}
+
+.profile-grid button:has(> img[src$=".svg"]),
+.profile-grid .formFieldValue input[type ="color"] {
+  background-color: var(--color-section-bg) !important;
+  border: none !important;
+  margin: 0 !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  padding: 0.5em !important;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease;
+  padding: 0 !important;
+}
+
+/* Specific icon button should have no extra padding */
+.profile-grid button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_1369241.svg"]) {
+  padding: 0 !important;
+}
+
+.profile-form button {
+  min-height: var(--min-touch-target);
+  min-width: var(--min-touch-target);
+}
+
+.profile-form input:not([type="color"]) {
+  width: 99%;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+.profile-form input:not([type="color"]),
+.profile-form textarea,
+.profile-form select {
+  max-width: 96%;
+  min-width: 0;
+  box-sizing: border-box ;
+  font: inherit;
+  color: var(--color-text);
+  background-color: var(--color-card-bg) !important;
+  border: 1px solid var(--color-border-pale);
+}
+
+.profile-form textarea {
+  border-color: var(--color-border-pale) !important;
+}
+
+.profile-form input[type="date"],
+.profile-form input[type="month"],
+.profile-form input[type="week"],
+.profile-form input[type="time"],
+.profile-form input[type="datetime-local"] {
+  min-height: var(--min-touch-target);
+}
+
+.profile-form .hoverControl:has(> img:first-child):focus-visible,
+.profile-form button:focus-visible,
+.profile-form input:not([type="color"]):focus-visible,
+.profile-form textarea:focus-visible,
+.profile-form select:focus-visible {
+  outline: var(--focus-ring-width) solid var(--color-primary) !important;
+  outline-offset: 2px;
+  box-shadow: 0 0 0 1px var(--color-background);
+}
+
+.profile-form input[type="url"] {
+  width: 100%;
+}
+
+.profile-form select#formSelect {
+  width: 100%;
+  max-width: 97%;
+  box-sizing: border-box;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+/* Remove border/padding from the first wrapper div (and its first child wrapper). */
+.profile-form > div:first-of-type,
+.profile-form > div:first-of-type > div:first-of-type {
+  border: none !important;
+  padding: 0 !important;
+}
+
+/* Remove border/padding from the inner div of the first wrapper in the contact section. */
+section[aria-labelledby="edit-profile-contact-heading"] .profile-form > div:first-of-type > div:first-of-type {
+  border: none !important;
+  padding: 0 !important;
+}
+
+/* In contactPane, remove border/padding from all direct child divs. */
+.contactPane > div {
+  border: none !important;
+  padding: 0 !important;
+}
+
+/* Align schema.org, solid terms, FOAF, vCard, and org field labels with their input values. */
+.profile-form :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) {
+  display: flex;
+}
+
+/* for the Resume inside corporation choice */
+/* Add space between classifierBox label and select box */
+.profile-form .choiceBox .classifierBox-label {
+  /* Optional: ensure label doesn't have extra margin */
+  margin-right: 0;
+  padding-left: 0.3em;
+}
+.profile-form .choiceBox .choiceBox-selectBox select {
+  margin-left: 2.1em !important;
+}
+
+/* for the Resume orga details */
+/* Add space between classifierBox label and select box */
+.profile-form .classifierBox .classifierBox-label {
+  /* Match .formFieldName for alignment */
+  margin-right: 0;
+  padding-left: 0.3em;
+  width: 8em;
+  padding: 0.3em;
+  vertical-align: middle;
+}
+.profile-form .classifierBox .classifierBox-selectBox {
+  margin-left: 0 !important;
+}
+
+.profile-form .classifierBox .classifierBox-selectBox select {
+  margin-left: 0 !important;
+}
+
+/* for the social media */
+/* Add space between classifierBox label and select box */
+section[data-testid="edit-social-section"] .classifierBox-label {
+  /* Optional: ensure label doesn't have extra margin */
+  margin-right: 0;
+  padding-left: 0.3em;
+}
+section[data-testid="edit-social-section"] .classifierBox-selectBox select {
+  margin-left: 0.7em !important;
+}
+
+.profile-form :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) > .formFieldValue {
+  margin-bottom: 0;
+}
+
+.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://schema.org/"]),
+.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://www.w3.org/ns/solid/terms#"]),
+.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://xmlns.com/foaf/0.1/"]),
+.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://www.w3.org/2006/vcard/ns"]),
+.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://www.w3.org/ns/org#"]) {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+
+.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://schema.org/"]) + .formFieldValue,
+.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://www.w3.org/ns/solid/terms#"]) + .formFieldValue,
+.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://xmlns.com/foaf/0.1/"]) + .formFieldValue,
+.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://www.w3.org/2006/vcard/ns"]) + .formFieldValue,
+.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://www.w3.org/ns/org#"]) + .formFieldValue {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  flex: 1;
+  min-width: 0;
+}
+
+.profile-form textarea,
+.profile-form .formFieldValue textarea {
+  appearance: none;
+  -webkit-appearance: none;
+  border: .05em solid #88c !important;
+  border-style: solid !important;
+  border-width: .05em !important;
+  border-color: #88c !important;
+  border-radius: 0.2em !important;
+  width: 99%;
+  box-sizing: border-box;
+  margin-top: var(--spacing-xs);
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+/* Add horizontal gap between label and textarea for all label+textarea pairs. */
+.profile-form div:has(> a) + div:has(textarea) {
+  margin-left: var(--spacing-sm);
+}
+
+/* Center textarea label vertically in flex rows. */
+.profile-form div[style*="display: flex"][style*="flex-direction: row"]:has(textarea) {
+  align-items: flex-start;
+}
+
+.profile-form div[style*="display: flex"][style*="flex-direction: row"]:has(textarea) > div:has(> a) {
+  padding-left: var(--spacing-xs);
+  padding-top: var(--spacing-sm);
+}
+
+
+.profile-form :not(.choiceBox):has(> .formFieldValue input[data-testid="autocomplete-input"]) > .formFieldName {
+  padding-top: 0.55em !important;
+}
+
+
+.profile-form input:disabled,
+.profile-form textarea:disabled,
+.profile-form select:disabled,
+.profile-form input[readonly],
+.profile-form textarea[readonly],
+.profile-form input:read-only,
+.profile-form textarea:read-only {
+  background-color: var(--color-background) !important;
+  cursor: not-allowed;
+  opacity: 0.75;
+  border: 0.05em solid white !important;
+}
+
+.webidControl table td div.contactPane.namedPane {
+  border: none !important;
+}
+
+/* Hide the edit icon used by solid-ui (noun_253504.svg and noun_1180158.svg) when it appears as an <img> */
+img[src*="noun_253504.svg"],
+img[src*="noun_1180158.svg"] {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+/* Ensure the parent button for that icon doesn't add padding/margin or affect layout */
+button:has(> img[src*="noun_253504.svg"]),
+button:has(> img[src*="noun_1180158.svg"]) {
+  display: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border: none !important;
+  background: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  overflow: hidden !important;
+}
+
+/* Exceptions: allow these icons (and their buttons) when they're part of the add-friend or add-community flows. */
+.profile-grid .profileSection .add-friend-button-container img[src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"],
+.profile-grid .profileSection .add-community-button-container img[src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"],
+.profile-grid .profileSection .add-friend-button-container button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"]),
+.profile-grid .profileSection .add-community-button-container button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"]) {
+  display: inline-flex !important;
+  width: auto !important;
+  height: auto !important;
+  overflow: visible !important;
+}
+
+
+/* Exception: allow “Continue” buttons inside add-friend and add-community button containers. */
+.profile-grid .profileSection .add-friend-button-container button:has(> img[title="Continue"]),
+.profile-grid .profileSection .add-community-button-container button:has(> img[title="Continue"]),
+.profile-grid .profileSection .add-friend-button-container button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"]),
+.profile-grid .profileSection .add-community-button-container button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"]),
+.profile-grid .profileSection .add-friend-button-container img[src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"],
+.profile-grid .profileSection .add-community-button-container img[src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"] {
+  display: inline-flex !important;
+  width: 2em !important;
+  height: 2em !important;
+  overflow: visible !important;
+}