mashlib 2.1.4-test.5 → 2.1.4-test.6

package/dist/mash.css

@@ -208,6 +208,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;
@@ -237,10 +243,12 @@
 .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) {
@@ -361,6 +369,30 @@
 
 /* Utility-first CSS classes for layout, spacing, and responsiveness */
 
+:root {
+  /* Added for profile-pane (editProfile) layout sizing */
+  --spacing-xxs: 0.4em;
+  --spacing-xxxs: 0.1em;
+  --profile-image-size: 3em;
+}
+
+@media (max-width: 1000px) {
+  .profile-grid,
+  .profile-grid * {
+    font-size: 2rem !important;
+  }
+
+  .profile-grid .actionButton,
+  .profile-grid .searchInput,
+  .profile-grid .flatButton,
+  .profile-grid .buttonSection button,
+  .profile-grid .groupButtonsList button {
+    min-height: calc(var(--min-touch-target) + 0.5em) !important;
+    font-size: 2rem !important;
+    padding: 1em 1em !important;
+  }
+}
+
 .actionButton {
   width: 100%;
   min-width: 180px;
@@ -375,7 +407,8 @@
 
 .profile-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));
+  /* Allow the grid to shrink below 30em on small viewports to avoid overflow */
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30em), 1fr));
   gap: var(--spacing-lg);
   background: var(--color-background);
 }
@@ -568,6 +601,13 @@
   box-shadow: none;
 }
 
+/* Prevent labels from appearing focusable to keyboard users. */
+label:focus,
+label:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
 /* Better focus for text elements */
 .focusable-text:focus {
   background-color: rgba(124, 77, 255, 0.1);
@@ -689,23 +729,66 @@
   background-color: transparent;
 }
 
-/* this overrides a style coming from contacts-pane*/
+/* 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;
 }
 
-/* Vertically center autocomplete input in .formFieldValue */
-.profile-form .formFieldValue > div[style*="flex-direction: row"] {
-  align-items: center;
-  display: flex;
+.profile-form p {
+  padding: 0 !important;
 }
 
-.profile-form .formFieldValue input[data-testid="autocomplete-input"] {
-  vertical-align: middle;
+.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) {
@@ -722,40 +805,107 @@
   justify-content: center;
 }
 
-.profile-form .hoverControlHide {
+/* 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;
-  display: block;
-  margin-top: 0 !important;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-  margin-bottom: 0.3em !important;
+  display: none !important;
+  align-items: center;
+  justify-content: center;
+  margin: 0 !important;
+  float: none !important;
+  transform: none !important;
 }
 
-.profile-form .hoverControl:has(> img:first-child) > span {
-  display: inline-flex;
-  align-items: center;
-  margin-left: 0.3em;
+/* 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;
+}
+
+/* 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;
 }
 
-.profile-form div[style*="padding: 0.5em"]:has(> img) {
+/* 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-form div[style*="padding: 0.5em"]:has(> img) > span {
+.profile-grid div[style*="padding: 0.5em"]:has(> img) > span {
   margin-left: 0.3em;
+  vertical-align: super !important;
 }
 
-.profile-form .hoverControl:has(> img:first-child):hover {
+.profile-grid .hoverControl:has(> img:first-child):hover {
   background-color: transparent !important;
 }
 
-.profile-form button:has(> img[src$=".svg"]) {
-  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 {
@@ -763,10 +913,16 @@
   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: 100%;
+  max-width: 96%;
   min-width: 0;
   box-sizing: border-box ;
   font: inherit;
@@ -801,32 +957,6 @@
   width: 100%;
 }
 
-.profile-form .formFieldValue {
-  min-width: 0;
-  margin-bottom: var(--spacing-sm);
-}
-
-.profile-form .formFieldValue table {
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-.profile-form .formFieldValue td {
-  padding: 0 !important;
-  vertical-align: middle;
-}
-
-.profile-form .formFieldValue table[data-testid="autocomplete-table"] {
-  height: 100%;
-}
-
-.profile-form .formFieldValue input:not([type="color"]),
-.profile-form .formFieldValue textarea,
-.profile-form .formFieldValue select {
-  width: 100%;
-  max-width: 100%;
-}
-
 .profile-form select#formSelect {
   width: 100%;
   max-width: 97%;
@@ -835,11 +965,6 @@
   margin-right: 0 !important;
 }
 
-.profile-form .formFieldValue span select {
-  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 {
@@ -862,7 +987,6 @@ section[aria-labelledby="edit-profile-contact-heading"] .profile-form > div:firs
 /* 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;
-  margin-bottom: var(--spacing-sm);
 }
 
 /* for the Resume inside corporation choice */
@@ -894,10 +1018,6 @@ section[aria-labelledby="edit-profile-contact-heading"] .profile-form > div:firs
   margin-left: 0 !important;
 }
 
-.profile-form .formFieldValue > span > 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 {
@@ -944,7 +1064,7 @@ section[data-testid="edit-social-section"] .classifierBox-selectBox select {
   border-width: .05em !important;
   border-color: #88c !important;
   border-radius: 0.2em !important;
-  width: 100%;
+  width: 99%;
   box-sizing: border-box;
   margin-top: var(--spacing-xs);
   margin-left: 0 !important;
@@ -966,33 +1086,11 @@ section[data-testid="edit-social-section"] .classifierBox-selectBox select {
   padding-top: var(--spacing-sm);
 }
 
-/* Keep autocomplete/table-based fields (e.g. Occupation) aligned to label text baseline. */
-.profile-form :not(.choiceBox):has(> .formFieldValue input[data-testid="autocomplete-input"]) {
-  align-items: flex-start;
-}
 
 .profile-form :not(.choiceBox):has(> .formFieldValue input[data-testid="autocomplete-input"]) > .formFieldName {
   padding-top: 0.55em !important;
 }
 
-.profile-form .formFieldValue:has(input[data-testid="autocomplete-input"]) {
-  align-self: flex-start;
-}
-
-.profile-form .formFieldValue table[data-testid="autocomplete-table"],
-.profile-form .formFieldValue input[data-testid="autocomplete-input"] {
-  margin: 0 !important;
-}
-
-.profile-form .formFieldValue table[data-testid="autocomplete-table"] {
-  vertical-align: baseline;
-}
-
-.profile-form input:not([type="color"]) {
-  width: 100%;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
 
 .profile-form input:disabled,
 .profile-form textarea:disabled,
@@ -1011,6 +1109,108 @@ section[data-testid="edit-social-section"] .classifierBox-selectBox select {
   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;
+}
+
+.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);
+}
 /*
 ** Light Theme (Default)
 ** Default color scheme for SolidOS