WIP WIP

Author: mydea

docs/platforms/javascript/common/apis.mdx

@@ -73,3 +73,24 @@ Sentry.setTag("tag", "value");
   example, you might manually record a breadcrumb if the user authenticates or
   another state change occurs.
 </SdkApi>
+
+<SdkApi
+  name="captureException"
+  signature="function captureException(exception: Exception, hint?: Hint): Promise<EventId>"
+  parameters={[
+    {
+      name: "exception",
+      required: true,
+      type: "unknown",
+      description: "The exception to capture.",
+    },
+    {
+      name: "hint",
+      type: "Record<string, unknown>",
+      description:
+        "A hint object containing additional information about the exception.",
+    },
+  ]}
+>
+  Capture an exception and send it to Sentry.
+</SdkApi>

src/components/sdkApi.tsx

@@ -50,7 +50,7 @@ export function SdkApi({
 
       {parameters.length ? (
         <Expandable title="Parameters">
-          <SdkDefinitionTable className="bg-white">
+          <SdkDefinitionTable className="bg-white !w-full">
             {parameters.map(param => (
               <ApiParameterDef key={param.name} {...param} />
             ))}

src/components/sdkDefinition/index.tsx

@@ -13,7 +13,7 @@ type Props = {
 export function SdkDefinition({name, children, categorySupported = []}: Props) {
   return (
     <PlatformCategorySection supported={categorySupported}>
-      <div>
+      <div className={styles['sdk-config-option']}>
         <h3 id={name} aria-label={name} data-sdk-option>
           <a href={`#${name}`}>
             <svg
@@ -32,7 +32,7 @@ export function SdkDefinition({name, children, categorySupported = []}: Props) {
           </a>
         </h3>
 
-        {children}
+        <div className={styles['sdk-config-option-details']}>{children}</div>
       </div>
     </PlatformCategorySection>
   );

src/components/sdkDefinition/style.module.scss

@@ -1,16 +1,16 @@
-.sdk-config-option {
-  padding-top: 10px;
+.sdk-config-option:not(:last-child) {
+  margin-bottom: 2rem;
 }
 
 .sdk-config-option-details {
-  padding-left: 20px;
+  padding-left: 0;
 }
 
 .sdk-option-table {
   --border-radius: 6px;
   font-size: 1rem;
   margin-top: 1rem;
-  width: auto !important;
+  width: auto;
 
   // This is necessary to make rounded borders work :(
   border-collapse: separate !important;
@@ -24,10 +24,11 @@
     margin-bottom: 0;
   }
 
-  & tr th, & tr td {
+  & tr th,
+  & tr td {
     border-bottom-width: 0;
     border-right-width: 0;
-    padding: .5rem .75rem
+    padding: 0.5rem 0.75rem;
   }
 
   & tr:last-child > * {
@@ -54,3 +55,8 @@
     border-bottom-right-radius: var(--border-radius);
   }
 }
+
+// This is to ensure specificity beats .prose table :(
+.sdk-config-option .sdk-option-table {
+  width: auto;
+}